Ažurirajte Google mape pomoću GeoJSON ili KML datoteka koristeći JavaScript API
KML (Keyhole Markup Language) i GeoJSON (Geografski JSON) su dva formata datoteka koji se koriste za pohranjivanje geografskih podataka na strukturiran način. Svaki format je pogodan za različite vrste aplikacija i može se koristiti u raznim uslugama kartiranja, uključujući Google Maps. Udubimo se u detalje svakog formata i pružimo primjere:
KML datoteka
KML je format zasnovan na XML-u za predstavljanje geografskih podataka, razvijen za upotrebu sa Google Earth-om. Odličan je za prikaz tačaka, linija, poligona i slika na kartama. KML datoteke mogu uključivati funkcije kao što su oznake mjesta, putanje, poligoni, stilovi i još mnogo toga.
Primjer KML datoteke:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name>Example KML</name>
<Placemark>
<name>New York City</name>
<description>New York City</description>
<Point>
<coordinates>-74.006,40.7128,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Ovaj KML primjer definira jednu oznaku mjesta za New York City. The <coordinates>
tag specificira geografsku dužinu, širinu i nadmorsku visinu (tim redoslijedom), pri čemu je nadmorska visina opciona.
GeoJSON fajl
GeoJSON je format za kodiranje različitih geografskih struktura podataka koristeći JSON. Podržava tipove geometrije kao što su Point, LineString, Poligon, MultiPoint, MultiLineString, MultiPolygon i GeometryCollection.
Primjer GeoJSON datoteke:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "New York City",
"description": "New York City"
},
"geometry": {
"type": "Point",
"coordinates": [-74.006, 40.7128]
}
}
]
}
Ovaj GeoJSON primjer također definira jednu tačku za New York City, slično KML primjeru. The coordinates
niz sadrži geografsku dužinu i širinu.
Razlike i upotreba
- KML se često koristi s Google Earthom i drugim aplikacijama koje zahtijevaju bogate geografske napomene i stil. Vrlo je pogodan za pripovijedanje ili detaljne geografske prezentacije.
- GeoJSON je lakši i obično se koristi u web aplikacijama, posebno u onima koje koriste JavaScript. To je preferirani format za web-bazirane aplikacije za karte i GIS softver zbog njegove jednostavnosti i kompatibilnosti sa JavaScript notacijom objekata.
Oba formata su ključna u različitim prodajnim i marketinškim strategijama, posebno kada se geografsko mapiraju podaci o kupcima, analiziraju tržišni trendovi ili planiraju marketinške kampanje zasnovane na lokaciji. Sposobnost vizualnog predstavljanja podataka na kartama može biti moćan alat u ovim kontekstima, pomažući u boljem donošenju odluka i razvoju strategije.
Kako ugraditi KML ili GeoJSON u vašu Google mapu
Da biste ugradili KML ili JSON fajl sa geografskim podacima koristeći Google Maps JavaScript API, morate slijediti ove korake za svaku vrstu datoteke:
Ugrađivanje KML datoteke
- Pripremite KML datoteku: Provjerite je li vaš KML fajl dostupan na mreži. Mora biti javno dostupan da bi ga Google Mape dohvatile.
- Kreirajte mapu: Inicijalizirajte novu Google mapu u svojoj aplikaciji.
- Učitajte KML sloj: Koristiti
google.maps.KmlLayer
class da dodate svoju KML datoteku na mapu.
Primjer koda:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'http://yourdomain.com/path/to/yourfile.kml',
map: map
});
}
zamijeniti 'http://yourdomain.com/path/to/yourfile.kml'
sa URL-om vaše KML datoteke.
Ugrađivanje JSON datoteke
- Pripremite JSON fajl: Vaš JSON bi trebao biti u GeoJSON formatu, standardnom formatu za kodiranje geografskih podataka.
- Kreirajte mapu: Kao i kod KML-a, inicijalizirajte Google Mapu u svojoj aplikaciji.
- Učitajte GeoJSON sloj: Koristiti
map.data.loadGeoJson()
metoda za dodavanje vaših GeoJSON podataka na mapu.
Primjer koda:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
// Assuming your GeoJSON file is located at the specified URL
map.data.loadGeoJson('http://yourdomain.com/path/to/yourfile.json');
}
zamijeniti 'http://yourdomain.com/path/to/yourfile.json'
sa URL-om vašeg GeoJSON fajla.
Stvari koje treba imati na umu
- Uvjerite se da su vaše KML i GeoJSON datoteke ispravno formatirane i javno dostupne.
- Potreban je JavaScript API ključ Google Maps. Uključite ga u svoj HTML fajl u koji se učitava skripta Google Maps.
- Podesite kartu
zoom
icenter
svojstva prema geografskoj lokaciji vaših podataka.
Integracijom KML ili GeoJSON datoteka na ovaj način, možete efikasno prikazati bogate geografske podatke na vašoj web aplikaciji, nudeći korisnicima dinamično i interaktivno iskustvo karte. Ovo može biti posebno korisno u različitim prodajnim i marketinškim kontekstima, gdje vizualizacija geografskih podataka može poboljšati razumijevanje i angažman potencijalnih klijenata ili članova tima.