mapsense-examples/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Print text from GeoJSON on the map


## 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;
    }
    .point {
        fill: rgba(68, 167, 228, 0.4);
        stroke: rgba(68, 167, 228, 1);
        stroke-width: 1;
    }
</style>

</head>

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

<script>

var map = mapsense.map("#myMap"); //tell it where to go
map.add(
    mapsense.basemap()
        .apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc")
    )
    .center( {lon: -122.463, lat: 37.765}) //set a center
    .zoom(10); //set a zoom

var point = [markLatLon(37.78709, -122.41094, "Hello, Map!")]; // a geojson features array

pt_layer = mapsense.geoJson()
    .features(point)
    .selection(function(d){
        d.attr("class", "point")
         .attr("r", "10");
    })
    .on("load", load)
    ;
map.add(pt_layer);

function markLatLon(lat,lon,name){
    name = name || "";
    var feature = {
        type: "Feature",
        geometry: {type: "Point", "coordinates": [ +lon, +lat ]},
        properties: {name: name}
    };
    return feature;
}


function load(e) {
    var label = e.features[0].data.properties.name;

    var f = e.features[0],
        c = f.element,
        t = mapsense.svg("text");

    t.setAttribute("transform", c.getAttribute("transform"));
    t.setAttribute("text-anchor", "middle");
    t.setAttribute("y", "0.5em");
    t.setAttribute("dy", "1.1em");
    t.setAttribute("id", "autolabel");
    t.setAttribute("class", "map_label");
    t.setAttribute("paint-order", "stroke");

    var tnode = document.createTextNode(label);
    t.appendChild(tnode);

    c.parentNode.insertBefore(t, c.nextSibling);
}


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;
	}
	.point {
	fill: rgba(68, 167, 228, 0.4);
	stroke: rgba(68, 167, 228, 1);
	stroke-width: 1;
	}
	</style>

	</head>

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

	<script>

	var map = mapsense.map("#myMap"); //tell it where to go
	map.add(
	mapsense.basemap()
	.apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc")
	)
	.center( {lon: -122.463, lat: 37.765}) //set a center
	.zoom(10); //set a zoom

	var point = [markLatLon(37.78709, -122.41094, "Hello, Map!")]; // a geojson features array

	pt_layer = mapsense.geoJson()
	.features(point)
	.selection(function(d){
	d.attr("class", "point")
	.attr("r", "10");
	})
	.on("load", load)
	;
	map.add(pt_layer);

	function markLatLon(lat,lon,name){
	name = name \|\| "";
	var feature = {
	type: "Feature",
	geometry: {type: "Point", "coordinates": [ +lon, +lat ]},
	properties: {name: name}
	};
	return feature;
	}


	function load(e) {
	var label = e.features[0].data.properties.name;

	var f = e.features[0],
	c = f.element,
	t = mapsense.svg("text");

	t.setAttribute("transform", c.getAttribute("transform"));
	t.setAttribute("text-anchor", "middle");
	t.setAttribute("y", "0.5em");
	t.setAttribute("dy", "1.1em");
	t.setAttribute("id", "autolabel");
	t.setAttribute("class", "map_label");
	t.setAttribute("paint-order", "stroke");

	var tnode = document.createTextNode(label);
	t.appendChild(tnode);

	c.parentNode.insertBefore(t, c.nextSibling);
	}


	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>