Company Blog

SCIENCE - TECHNOLOGY - SOLUTIONS

GISA 2014: Making Maps with JavaScript

Presentation delivered this afternoon at the GISA conference by John Sercel of SICS. 



Google Maps API
 
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   html, body, #map-canvas { height: 100%; margin: 0; padding: 0 } 
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
   function initialize() {
       var map = new google.maps.Map(document.getElementById("map-canvas"), {
           mapTypeId: google.maps.MapTypeId.ROADMAP,
           center: new google.maps.LatLng(30.272184, -87.691470),
           zoom: 16
       });
   }
</script>
</head>
<body onload="initialize()">
   <div id="map-canvas"></div>
</body>
</html>
OpenLayers API 
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   html, body, #map-canvas { height: 100%; margin: 0; padding: 0 } 
</style>
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css" />
<script src="http://ol3js.org/en/master/build/ol.js" type="text/javascript"></script>
<script type="text/javascript">
   function initialize(){
       var map = new ol.Map({
           target: 'map-canvas',
           layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
           view: new ol.View2D({
               center: ol.proj.transform([-87.691470, 30.272184], 'EPSG:4326', 'EPSG:3857'),
               zoom: 16
           })
       });
   }
</script>
</head>
<body onload="initialize()">
   <div id="map-canvas"></div>
</body>
</html>
ArcGIS API 
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
   html, body, #map-canvas { height: 100%; margin: 0; padding: 0 } 
</style>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.9/"></script>
<script>
   require(["esri/map", "dojo/domReady!"], function(Map) {
       var map = new Map("map-canvas", {
           basemap: "streets",
           center: [-87.691470, 30.272184],
           zoom: 16
       });
   });
</script>
</head>
<body>
   <div id="map-canvas"></div>
</body>
</html>