block by nitaku 6329914587d010bcbc9b

OpeNER - Places with categories (GMaps)

Full Screen

An example that uses the OpeNER Tour-pedia APIs and Google Maps API to display all the places in Isola d’Elba as a dot density map. Color is used to distinguish among the four categories to which a place can belong.

index.js

// Get data

var url = 'http://wafi.iit.cnr.it/openervm/api/getPlacesByArea?S=42.666&N=42.912&W=10&E=10.5';

$.getJSON(url, function(data) {
    
  // Visualize

  var center = new google.maps.LatLng(42.779152, 10.277379);
  var myOptions = {
    zoom: 11,
    center: center
  };
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  
  for(var i in data) { // noprotect
    new google.maps.Marker({
      position: new google.maps.LatLng(data[i].lat, data[i].lng), 
      map: map, 
      title: data[i].name,
      icon: "http://wafi.iit.cnr.it/webvis/examples/opener_places/"+data[i].category+".png"
    });
  }
});

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="OpeNER - Places with categories (GMaps)" />
    <title>OpeNER - Places with categories (GMaps)</title>
    <link rel="stylesheet" href="index.css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
  <div id="mapcanvas" style="height: 500px; width: 960px"></div>
  
  <script src="index.js"></script>
</body>
</html>

index.css

body {
    margin: 0;
    padding: 0;
}
svg {
    background: white;
}