jQuery GeoCloud-Plugin
Ein kleines Plugin für das Setzen von Punkten (Orten) auf einer Karte.
Dabei werden die Welt-Koordinaten in Pixel umgerechnet.
Weitere Karten werden noch erstellt.
» GeoCloud jQuery-Plugin bei Github
-
Deutschland
-
Spanien
-
Italien
-
Frankreich
-
Großbritannien
Beispiel-Code
Initialisierung des Plugins
$('#map_cloud').geocloud({
width: 306, // Breite der Karte
height: 400, // Höhe der Karte
map_src: 'italy_s.png', // Pfad zur Karten-Grafik
geo_settings: { // wird mit jeder Karte mitgeliefert
x_corr: 0.81,
y_corr: 1.10,
coef: 0.0316
},
ref_point: { // wird mit jeder Karte mitgeliefert
pixel_point: [149, 208],
coord: [12.4942486, 41.8905198]
}
});
setzen von Punkten mit Events
» Koordinaten für eine Reihe von Städten erstellen
$('#map_cloud').data('geocloud').drawPoints([
{title: 'Roma', size: 24, coord: [12.4942486, 41.8905198]},
{title: 'Trento', size: 18, coord: [11.1190591, 46.0667123]},
{title: 'Palermo', size: 13, coord: [13.3614059, 38.11564]},
{title: 'Catanzaro', size: 10, coord: [16.5877572, 38.9105359]},
{title: 'Genova', size: 18, coord: [8.93398890, 44.4070624]},
{title: 'Aosta', size: 11, coord: [7.313234, 45.7350001]},
{title: 'Napoli', size: 9, coord: [14.2525421, 40.8399833]},
{title: 'Bari', size: 20, coord: [16.8721133, 41.1259135]},
{title: 'Venezia', size: 17, coord: [12.3387844, 45.4343363]},
{title: 'Milano', size: 8, coord: [9.1881714, 45.463681]},
{title: 'Cagliari', size: 14, coord: [9.10932389, 39.2154086]}
],
{
css: {}, // weitere CSS-Eigenschaften für Punkte angeben
attr: {}, // weitere Attribute angeben (title, class, etc..)
// Events übergeben (event.data.city enthält alle Werte die im Point übergeben werden {title, size, coor, etc..})
events: {
'mouseover': function(event) {},
'click': function(event) {
alert(event.data.city.title);
}
}
});