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 geocoding, geolocation, user events, markers and layers) onto a web page in a simple and concise way. In its core, Landcarte is based on the Google Maps API v3 and jQuery.

Landcarte provides access to the features of one of the most popular map APIs in a handy jQuery-like way. Its compact syntax helps reduce recurrent lengthy constructions of the API and also provides a more concise and straightforward way to deal with the basic geographical formats.

See also Landcarte Reference.

Brief Overview

Initialization

A map instance is initialized and reused via the .geoMap() method called on a jQuery object of the map container:

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

Overlays 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 Guide

Since the Landcarte framework relies both on jQuery and the Google Maps API v3, they should be included into the page in the first place.

<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 a downloaded version of Landcarte.

A map instance is initialized and reused via the .geoMap() method called on a jQuery object of the map container:

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

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

Example #1

A map with clickable markers showing 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 can be regarded as a blend of an English and a French word, both recognized worldwide. It is also the archaic spelling of the modern German word Landkarte meaning 'map', and it historically combines the same two roots of the common Germanic and of Middle French origin.