mapsense-examples · August 29, 2015 14:21
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
    <script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script>
    <link type="text/css"  href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/>

 <style>
    html, body, #myMap {
        height: 100%;
        width: 100%;
        margin: 0; padding: 0;
        font-family: sans-serif;
        overflow: hidden;
    }

    #myMap {
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0; 
    }
    
    path {
      vector-effect: non-scaling-stroke;
      stroke-linejoin: round;
      stroke-linecap: round;
      stroke: #777;
      fill: none;
    }   
    circle {
        fill: rgba(68, 167, 228, 0.5);  /*blue*/
        stroke: rgba(68, 167, 228, 1);
    }

    .top-left {
        position: absolute;
        top: 5px;
        left: 5px;
    }


 </style>

 </head>
 <body>
    <div id="myMap"></div>

    <div class="top-left">
        <input id="geocode" placeholder="Search" /> <button type="button" id="btn_go" class="btn">Go</button>
    </div>

 <script>

 var map = mapsense.map("#myMap") //tell it where to go 
    .add( mapsense.basemap().apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc") );

 document.addEventListener("DOMContentLoaded",function(){

    // geocoding
    d3.select('#btn_go').on("click",function() {
        // Get lat/lon and bbox of search term, thanks to nominatim & mapquest.
        var geocode_url = "http://open.mapquestapi.com/nominatim/v1/search.php?q=" + d3.select('#geocode').node().value + "&limit=1&format=json"; 

        d3.json( geocode_url, function( data ) {
            if (data[0]) {
                var lat, lon, gj_polygon, jsonbb, bbox, gj, bbox_km;

                if (data[0].lat && data[0].lon) {
                    lat = data[0].lat;
                    lon = data[0].lon;
                    gj = ll2json(lat,lon,"found");

                    /* to show point/marker on map: */
                    if ( pt_layer && pt_layer.visible() ) { map.remove(pt_layer); }

                    var pt_layer = mapsense.geoJson()
                        .features(gj.features)
                        .selection(function(d){
                            d.attr("class", "point_highlight")
                            d.attr("r", "20")
                            ;
                        });
                    map.add(pt_layer);
                    
                    if (data[0].boundingbox) {
                        jsonbb = data[0].boundingbox;
                        bbox = [
                            {lon: jsonbb[2], lat: jsonbb[0]},
                            {lon: jsonbb[3], lat: jsonbb[1]}
                        ];

                        map.extent(bbox);

                    } else {
                        map.center({lon: lon, lat: lat}) 
                        .zoom(15);
                    }
                }
           } else {
                alert("No results found.");
           }
        });
    });
 });

 function ll2json(lat,lon,name){
    var gj = {type: "FeatureCollection", features: []}; //init a geojson object

    var feature = {
        type: "Feature",
        geometry: {type: "Point", "coordinates": [ +lon, +lat ]},
        properties: {
            name: name
        }
    };

    gj.features.push(feature);

    return gj;
 }

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script>
	<script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script>
	<link type="text/css" href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/>

	<style>
	html, body, #myMap {
	height: 100%;
	width: 100%;
	margin: 0; padding: 0;
	font-family: sans-serif;
	overflow: hidden;
	}

	#myMap {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	}

	path {
	vector-effect: non-scaling-stroke;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke: #777;
	fill: none;
	}
	circle {
	fill: rgba(68, 167, 228, 0.5); /blue/
	stroke: rgba(68, 167, 228, 1);
	}

	.top-left {
	position: absolute;
	top: 5px;
	left: 5px;
	}


	</style>

	</head>
	<body>
	<div id="myMap"></div>

	<div class="top-left">
	<input id="geocode" placeholder="Search" /> <button type="button" id="btn_go" class="btn">Go</button>
	</div>

	<script>

	var map = mapsense.map("#myMap") //tell it where to go
	.add( mapsense.basemap().apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc") );

	document.addEventListener("DOMContentLoaded",function(){

	// geocoding
	d3.select('#btn_go').on("click",function() {
	// Get lat/lon and bbox of search term, thanks to nominatim & mapquest.
	var geocode_url = "http://open.mapquestapi.com/nominatim/v1/search.php?q=" + d3.select('#geocode').node().value + "&limit=1&format=json";

	d3.json( geocode_url, function( data ) {
	if (data[0]) {
	var lat, lon, gj_polygon, jsonbb, bbox, gj, bbox_km;

	if (data[0].lat && data[0].lon) {
	lat = data[0].lat;
	lon = data[0].lon;
	gj = ll2json(lat,lon,"found");

	/* to show point/marker on map: */
	if ( pt_layer && pt_layer.visible() ) { map.remove(pt_layer); }

	var pt_layer = mapsense.geoJson()
	.features(gj.features)
	.selection(function(d){
	d.attr("class", "point_highlight")
	d.attr("r", "20")
	;
	});
	map.add(pt_layer);

	if (data[0].boundingbox) {
	jsonbb = data[0].boundingbox;
	bbox = [
	{lon: jsonbb[2], lat: jsonbb[0]},
	{lon: jsonbb[3], lat: jsonbb[1]}
	];

	map.extent(bbox);

	} else {
	map.center({lon: lon, lat: lat})
	.zoom(15);
	}
	}
	} else {
	alert("No results found.");
	}
	});
	});
	});

	function ll2json(lat,lon,name){
	var gj = {type: "FeatureCollection", features: []}; //init a geojson object

	var feature = {
	type: "Feature",
	geometry: {type: "Point", "coordinates": [ +lon, +lat ]},
	properties: {
	name: name
	}
	};

	gj.features.push(feature);

	return gj;
	}

	</script>
	</body>
	</html>