Subscribe to DSC Newsletter

OpenStreetMap Visualization Case Study & Sample Code

OpenStreetMap (OSM) is a tool for creating and sharing map information. Anyone can contribute to OSM, that OSM maps are saved on the internet, and anyone can access them at any time. The growth of OSM has been phenomenal over the years and the number of registered users contributing to OSM is nearly 2 Million.

While OSM is a powerful open source alternative to Google Maps for your Geo analytics projects. In the below example, we have taken an example case study of visualizing car insurance rates on a map. The example car insurance data is available on Vozag.

You will see the end output of the 10 cheapest car insurance states in a green marker, the 10 most expensive states in a red market & the rest of the states in the middle in blue.

Top 10 Cheap Car insurance states in red marker:

  1. Maine : $830

  2. Vermont : $870

  3. Idaho : $970

  4. Iowa : $1030

  5. North Carolina : $1090

  6. Ohio : $1110

  7. New Hampshire : $1110

  8. South Carolina : $1160

  9. Indiana : $1180

  10. Washington : $1230

10 most expensive car insurance states in blue marker:

  1. Louisiana : $2700

  2. Michigan : $2520

  3. Georgia : $2160

  4. Oklahoma : $2070

  5. Montana : $1890

  6. California : $1820

  7. West Virginia : $1820

  8. Rhode Island : $1740

  9. Kentucky : $1730

  10. Connecticut : $1720

The data set would need to be in the following format:

  1. State: Louisiana

  2. Car Insurance: $2700

  3. Lat/Long : [30.391830, -92.329102]

The steps to create the open street map visualization are simple & are below:

  1. Import openlayers.js file from openlayers.org

  2. Create one div tag in the webpage with a specified width and height.

  3. Collect data of StateLatitudeLongitudeList,StateInsuranceList and markers and pass these lists in the below sample code format.

JavaScript sample code to visualize car insurance states on OpenStreetMap

====

<div id="mapdiv" style="width: 800px; height: 400px; margin: 0 auto"> </div>

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

 <script>

   map = new OpenLayers.Map("mapdiv");

   map.addLayer(new OpenLayers.Layer.OSM());

   epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection

   projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)

   lat_long_list = LatitudeLongitudeList;

   state_ins_list = StateInsuranceList;

   m = MarkersList

   var lonLat1 = new OpenLayers.LonLat(lat_long_list[1],lat_long_list[0]).transform(epsg4326, projectTo)

   var zoom=7;

   map.setCenter (lonLat1, zoom);

   var vectorLayer = new OpenLayers.Layer.Vector("Overlay");

   

   for(var i=0;i<lat_long_list.length;i++)

   {

     var feature = new OpenLayers.Feature.Vector(

     new OpenLayers.Geometry.Point(a[i][1], a[i][0] ).transform(epsg4326, projectTo),

     {description:state_ins_list[i]} ,{externalGraphic:'/images/'+m[i], graphicHeight: 25,

     graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25}   

      );                         

   vectorLayer.addFeatures(feature);

   }

   map.addLayer(vectorLayer);

   //Add a selector control to the vectorLayer with popup functions

   var controls = {

     selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })

   };

   function createPopup(feature) {

     feature.popup = new OpenLayers.Popup.FramedCloud("pop",

         feature.geometry.getBounds().getCenterLonLat(),

         null,

         '<div class="markerContent">'+feature.attributes.description+'</div>',

         null,

         true,

         function() { controls['selector'].unselectAll(); }

     );

     //feature.popup.closeOnMove = true;

     map.addPopup(feature.popup);

   }

   function destroyPopup(feature) {

     feature.popup.destroy();

     feature.popup = null;

   }

   map.addControl(controls['selector']);

   controls['selector'].activate();

 </script>

 =====

DSC Resources

Views: 1806

Comment

You need to be a member of Data Science Central to add comments!

Join Data Science Central

Follow Us

Videos

  • Add Videos
  • View All

Resources

© 2017   Data Science Central   Powered by

Badges  |  Report an Issue  |  Privacy Policy  |  Terms of Service