at landcarte

Landcarte, a Google Maps jQuery plugin

Landcarte is a jQuery plugin and a JavaScript library that helps introduce geographic maps and their numerous features (including markers, shapes, layers, user interaction events and geocoding) onto a web page in a simple and concise way. In its core, Landcarte is based on the Google Maps API v3 and jQuery.

See also Landcarte Reference.

Objectives

Landcarte is an alternative to quite a number of existing jQuery map plugins which makes use of jQuery concepts beyond the initialization of a map container by extending them to the rest of the code — to the map engine itself. To learn more, see Comparison of Google Maps jQuery Plugins.

Brief Overview

Initialization

$("#map").geoMap();
// or, alternatively, with initial options:
$("#map").geoMap({ center: [50, 12], zoom: 10 });

Markers, Shapes and Layers

map.add("markers", [[50.5, 15.5], [56.5, 10.5]], { icon: "m.png" })
   .add("layer.bicycling")
   .add("polyline", {
      path: [[48.92, 2.24], [46.19, 6.06], [48.19, 16.35]],
      strokeColor: "#f00", strokeWeight: 3, strokeStyle: "dotted"
   });

Selectors

var markers  = map.find("markers");
var shapes   = map.find("shapes:odd");
var polyline = map.find("polylines:visible").eq(2);
var marker   = map.find("marker:last");

Attributes and Properties

map.attr("center", [46.5, 8]);
marker.prop({ position: [46.5, 8], title: "Pointer" });
polyline.attr({ strokeStyle: "3px dotted #c09" });

Collection Iterator

map.find("markers").each(function(i, marker) {
   marker.attr({ title: "Marker #" + i });
});

Events

var balloon = map.balloon();
map.find("markers").on("click", function(event) {
   var p = event.target.prop("position");
   balloon.attr({ position: p, content: p.lat + ", " + p.lon }).show();
});

Geocoding

map.search("Copenhagen", function(data) {
   if (data.location) map.add("marker", data.location);
});

Brief Introduction

Since Landcarte relies both on jQuery and the Google Maps API v3, they should be included into the page:

<script type="text/javascript"
   src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"
   src="//code.jquery.com/jquery-latest.min.js"></script>

After that follows the downloaded version of Landcarte.

A map is initialized on the map container's jQuery object:

$("#map").geoMap();

or, alternatively, with initial options:

$("#map").geoMap({ center: [50, 12], zoom: 10 });

Once the map is initialized it can be referred to by the same method call:

var map = $("#map").geoMap();

That's it. Further, this code is easily extended to something more practical:

Example #1

A map with clickable markers displaying their location.

var star = { url: "star.png", anchor: { x: 10, y: 10 } };
var points = [
   [-17.5, -149.77], [-17.54, -149.57], [-17.56, -149.6],
   [-17.63, -149.61], [-17.69, -149.58]
];

// initializing a map instance and adding markers and a polyline
var map = $("#map").geoMap({ center: [-17.6, -149.63], zoom: 10 })
   .add("markers", points, { icon: star })
   .add("polyline", points);

// initializing an info balloon
var balloon = map.balloon().hide();

// attaching a click handler to the markers
map.find("markers").on("click", function(event) {
   var p = event.target.prop("position");
   // displaying the result of the geocoding request
   map.search(p, function(data) {
      balloon.attr({ position: p, content: data.locality }).show();
   });
});
			
// restyling the polyline
map.find("polyline").attr({ strokeStyle: "3px dotted #c09" });

Example #2

The following code snippet is an interpretation of an example from the Google Maps API v3 Developer's Guide in terms of Landcarte:

$(function() {

   var map = $("#map").geoMap({
      zoom: 4,
      center: [-25.363882, 131.044922],
      mapTypeId: "roadmap"
   });

   map.on("click", function(event) {
      map.add("marker", event.location)
         .animate("center", event.location);
   });

});

This looks a bit less wordy and a bit more readable than the original code shown below:

var map;
function initialize() {
   var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
   var mapOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

   google.maps.event.addListener(map, 'click', function(event) {
      placeMarker(event.latLng);
   });
}

function placeMarker(location) {
   var marker = new google.maps.Marker({
      position: location,
      map: map
   });

   map.panTo(location);
}

google.maps.event.addDomListener(window, 'load', initialize);

Click on the map below to see it working.

For more details on how to use Landcarte, see Landcarte Reference.

*

The term landcarte stands for 'land map'. It can be decomposed into English land and French carte. It is also the archaic spelling of the modern German word for 'map' — Landkarte, which combines the same two roots of common Germanic and Middle French origin.