var m = new SMap(JAK.gel("m")); m.addControl(new SMap.Control.Sync()); /* Aby mapa reagovala na změnu velikosti průhledu */ m.addDefaultLayer(SMap.DEF_BASE).enable(); /* Turistický podklad */ var mouse = new SMap.Control.Mouse(SMap.MOUSE_PAN | SMap.MOUSE_WHEEL | SMap.MOUSE_ZOOM); /* Ovládání myší */ m.addControl(mouse); var response = function(xmlDoc) { var souradnice = []; var coords = xmlDoc.getElementsByTagName("coord"); var maxPoints = Math.min(200, coords.length); for (var i=0;i<maxPoints;i++) { var index = Math.round(coords.length * (i / maxPoints)); var node = coords[index]; var lat = parseFloat(node.getAttribute("lat")); var lon = parseFloat(node.getAttribute("lon")); var c = SMap.Coords.fromWGS84(lat, lon); souradnice.push(c); } var vrstva = new SMap.Layer.Geometry(); /* Geometrická vrstva */ m.addLayer(vrstva); /* Přidat ji do mapy */ vrstva.enable(); /* A povolit */ var options = { color: "blue", opacity: 0.3, outlineColor: "blue", outlineOpacity: 0.7, outlineWidth: 4, curvature: 0 }; var polygon = new SMap.Geometry(SMap.GEOMETRY_POLYGON, null, souradnice, options); vrstva.addGeometry(polygon); var cz = m.computeCenterZoom(souradnice); /* Spočítat pozici mapy tak, aby byl vidět celý mnohoúhelník */ m.setCenterZoom(cz[0], cz[1]); } var request = new JAK.Request(JAK.Request.XML); request.setCallback(window, response); request.send("//api.mapy.cz/xml/cr.xml");
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>api4.mapy.cz - ukázka práce se vektorovou vrstvou</title> <script type="text/javascript" src="https://api.mapy.cz/loader.js"></script> <script type="text/javascript">Loader.load();</script> </head> <body id="advanced-geometry"> <div id="m" style="height:360px"></div> </body> </html>