Mapstraction Examples-Adding CartoCiudad Features

Demo Functions

Source Code:

<html>
  <head>
    <title>Mapstraction Examples - Editing Google Features</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://mvn.idelab.uva.es/idelabmapstraction/downloads/1.0/idelabmapstraction.js" type="text/javascript"></script>

    <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
  </head>
  <body>
      <div id="mapstraction"></div>
      <script type="text/javascript">
          // initialise the map with your choice of API
          var mapstraction = new mxn.MapstractionInteractive('mapstraction','cartociudad');
          mapstraction.setCenterAndZoom(new mxn.LatLonPoint(40, -3),5);

          //adding event listeners to map
          mapstraction.markerAdded.addHandler(function(event,map,marker){
              alert('Marker added at: '+marker.marker.location.lat+' , '+marker.marker.location.lon)})
          mapstraction.polylineAdded.addHandler(function(event,map,polyline){
              alert('Polyline added: Now it has '+polyline.polyline.points.length+' vertices')})

          function addJSON(){
              mapstraction.addJSON(json);
          }

          function getJSON(){
              var json = mapstraction.getJSON();
              var features = json.features.length;
              var points = 0;
              var lines = 0;
              var polys = 0;
              for (var i in json.features){
                  if(json.features[i].geometry.type == "Point") points++;
                  else if(json.features[i].geometry.type == "LineString") lines++;
                  else if(json.features[i].geometry.type == "Polygon") polys++;
              }
              alert("GEOJSON info:\nThere are "+features+" features:\n"+
                  points+" Points, "+lines+" LineString and "+polys+" Polygons.")
          }
      </script>
  </body>
</html>