mapsense-examples · August 29, 2015 14:25
diff --git a/flag_map.png b/flag_map.png
diff --git a/flag_units.geojson b/flag_units.geojson
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;
        }

        .map {
            background-color: white;
            width: 100%;
            height: 100%;
        }

        path {
            vector-effect: non-scaling-stroke;
            stroke: white;
            fill: #777;
        }

        .flaggable {
            vector-effect: non-scaling-stroke;
            stroke: white;
            fill: #d3d4d5;
        }

        .painted {
            vector-effect: non-scaling-stroke;
            stroke: #777;
            stroke-width: 1px;
            fill: none;
        }

        image { opacity: 0; }

    </style>

 </head>

 <body>

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

    <script>
        var G = {}; // A Global object to keep any global variables together

        G.home = [ // we'll set the map extent to these bounds
            {lon: -125, lat: -60},
            {lon: 160, lat: 75}
        ];

        var map = mapsense.map("#myMap");
        map.extent(G.home);
        map.add(mapsense.hash());

        var layer;

        d3.json("flag_units.geojson", function(data) {
            layer = mapsense.geoJson()
                .features(data.features)
                .selection(function(s) {
                    s.attr("class", 'flaggable'); // give them class, just for good measure
                    s.attr("paint-order","fill");

                    s.attr("id", function(g,i) { // g = this element's data = its geojson attributes
                        //console.log(d,g,this); // arrays, data attribs, path
                        d3.select(this).on("mouseover", function(g){
                            d = d3.select(this);

                            if (d && d.node() && d.node().parentNode && g ) {
                                var p = d.node().parentNode;

                                // We make unique ids, so we can relate images to masks
                                var a_id = 'id_' + i;
                                // Get the country identifier from the geojson...
                                // We'll use this to find the correct flag.
                                var iso = g.properties.iso_a2;

                                // Get bounding box of the country so we can size and position the flags
                                var bbox = d.node().getBBox();

                                var final_x = bbox.x,
                                    final_y = bbox.y;

                                // Store the geometry of the path
                                var geom_d = d.attr('d');

                                // Make the clipPath (mask) using the geom and mask id
                                d3.select(p).append("clipPath")
                                    .attr("class", "mask")
                                    .attr("id", "mask_" + a_id)
                                    .append('path')
                                        .attr('d',geom_d)
                                        ;

                                // Load the svg files, but keep opacity 0 until hover
                                // Which ratio is country closest to? 1, 4/3 = 1.33, 3/4 = 0.75
                                // so break at 1.165 and 0.875
                                var ratio = bbox.width / bbox.height;
                                var svg_url = 'https://cdn.rawgit.com/stevenrskelton/flag-icon/master/svg/';

                                if ( ratio > 1.167 ) { // (4/3 + 1) / 2
                                    svg_url += 'country-4x3/' + iso.toLowerCase() + '.svg';
                                } else if ( ratio < 0.875) { // (3/4 + 1) / 2
                                    // Same file, but we'll rotate it later
                                    svg_url += 'country-4x3/' + iso.toLowerCase() + '.svg';
                                } else { // square-ish
                                    svg_url += 'country-squared/' + iso.toLowerCase() + '.svg';
                                }

                                // Put the image in the DOM
                                var svg_img = d3.select(p).append("g")
                                    // set its clip-path to the mask we made above
                                    .attr("clip-path", function(d) {
                                        return "url(#mask_" + a_id + ")";
                                    })
                                    // position it where the country is
                                    .attr("x", final_x)
                                    .attr("y", final_y)
                                    .attr("width", bbox.width)
                                    .attr("height", bbox.height)
                                    .append("image")
                                        .attr("xlink:href", svg_url)
                                        .attr("preserveAspectRatio", "none")
                                        .attr("x", final_x)
                                        .attr("y", final_y)
                                        .attr("width", bbox.width)
                                        .attr("height", bbox.height)
                                        .style("opacity", "1");

                                if ( ratio < 0.875 ) {
                                    svg_img
                                        .attr("height", bbox.width)
                                        .attr("width", bbox.height)
                                        .attr('transform',"translate(" + ((bbox.width)) + "," + (0*(final_y + (bbox.height))) + ") rotate(90," + (final_x - 0*(bbox.width)/2) + "," + (final_y - 0*(bbox.height)/2) + ")");
                                }

                                // Add another path for country borders (helpful where flags of the same color meet)
                                d3.select(p).append("g")
                                    .append('path')
                                        .attr('d',geom_d)
                                        .style("stroke", "#777")
                                        .style("fill", "none")
                                        ;
                            }
                        }); // end mouseover function
                    }); // end id attr
                }); // end selection function

            map.add(layer);
        }); // end json call

    </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;
	}

	.map {
	background-color: white;
	width: 100%;
	height: 100%;
	}

	path {
	vector-effect: non-scaling-stroke;
	stroke: white;
	fill: #777;
	}

	.flaggable {
	vector-effect: non-scaling-stroke;
	stroke: white;
	fill: #d3d4d5;
	}

	.painted {
	vector-effect: non-scaling-stroke;
	stroke: #777;
	stroke-width: 1px;
	fill: none;
	}

	image { opacity: 0; }

	</style>

	</head>

	<body>

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

	<script>
	var G = {}; // A Global object to keep any global variables together

	G.home = [ // we'll set the map extent to these bounds
	{lon: -125, lat: -60},
	{lon: 160, lat: 75}
	];

	var map = mapsense.map("#myMap");
	map.extent(G.home);
	map.add(mapsense.hash());

	var layer;

	d3.json("flag_units.geojson", function(data) {
	layer = mapsense.geoJson()
	.features(data.features)
	.selection(function(s) {
	s.attr("class", 'flaggable'); // give them class, just for good measure
	s.attr("paint-order","fill");

	s.attr("id", function(g,i) { // g = this element's data = its geojson attributes
	//console.log(d,g,this); // arrays, data attribs, path
	d3.select(this).on("mouseover", function(g){
	d = d3.select(this);

	if (d && d.node() && d.node().parentNode && g ) {
	var p = d.node().parentNode;

	// We make unique ids, so we can relate images to masks
	var a_id = 'id_' + i;
	// Get the country identifier from the geojson...
	// We'll use this to find the correct flag.
	var iso = g.properties.iso_a2;

	// Get bounding box of the country so we can size and position the flags
	var bbox = d.node().getBBox();

	var final_x = bbox.x,
	final_y = bbox.y;

	// Store the geometry of the path
	var geom_d = d.attr('d');

	// Make the clipPath (mask) using the geom and mask id
	d3.select(p).append("clipPath")
	.attr("class", "mask")
	.attr("id", "mask_" + a_id)
	.append('path')
	.attr('d',geom_d)
	;

	// Load the svg files, but keep opacity 0 until hover
	// Which ratio is country closest to? 1, 4/3 = 1.33, 3/4 = 0.75
	// so break at 1.165 and 0.875
	var ratio = bbox.width / bbox.height;
	var svg_url = 'https://cdn.rawgit.com/stevenrskelton/flag-icon/master/svg/';

	if ( ratio > 1.167 ) { // (4/3 + 1) / 2
	svg_url += 'country-4x3/' + iso.toLowerCase() + '.svg';
	} else if ( ratio < 0.875) { // (3/4 + 1) / 2
	// Same file, but we'll rotate it later
	svg_url += 'country-4x3/' + iso.toLowerCase() + '.svg';
	} else { // square-ish
	svg_url += 'country-squared/' + iso.toLowerCase() + '.svg';
	}

	// Put the image in the DOM
	var svg_img = d3.select(p).append("g")
	// set its clip-path to the mask we made above
	.attr("clip-path", function(d) {
	return "url(#mask_" + a_id + ")";
	})
	// position it where the country is
	.attr("x", final_x)
	.attr("y", final_y)
	.attr("width", bbox.width)
	.attr("height", bbox.height)
	.append("image")
	.attr("xlink:href", svg_url)
	.attr("preserveAspectRatio", "none")
	.attr("x", final_x)
	.attr("y", final_y)
	.attr("width", bbox.width)
	.attr("height", bbox.height)
	.style("opacity", "1");

	if ( ratio < 0.875 ) {
	svg_img
	.attr("height", bbox.width)
	.attr("width", bbox.height)
	.attr('transform',"translate(" + ((bbox.width)) + "," + (0(final_y + (bbox.height))) + ") rotate(90," + (final_x - 0(bbox.width)/2) + "," + (final_y - 0*(bbox.height)/2) + ")");
	}

	// Add another path for country borders (helpful where flags of the same color meet)
	d3.select(p).append("g")
	.append('path')
	.attr('d',geom_d)
	.style("stroke", "#777")
	.style("fill", "none")
	;
	}
	}); // end mouseover function
	}); // end id attr
	}); // end selection function

	map.add(layer);
	}); // end json call

	</script>
	</body>

	</html>