block by armollica 3598b8c89e1f18ea453231da41c7c3bc

Map with Pixi.js + D3

Full Screen

index.html

<!DOCTYPE html>
<html>
<body>
<script src="pixi.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var width = 960,
    height = 500,
    extent = [[30, 30], [width - 30, height - 30]];

var app = new PIXI.Application(width, height, { backgroundColor: 0xffffff });

document.body.appendChild(app.view);

var graphics = new PIXI.Graphics();

var textContainer = new PIXI.Container();

var textStyle = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: 12,
    fill: '#666666',
    dropShadow: true,
    dropShadowColor: '#ffffff',
    dropShadowBlur: 2,
    dropShadowDistance: 0
});

var projection = d3.geoMercator();

var path = d3.geoPath()
    .projection(projection)
    .context(graphics);

d3.json('topo.json', function(error, topo) {
    if (error) throw error;

    var land = topojson.feature(topo, topo.objects.land);
    var italy = topojson.feature(topo, topo.objects.italy);
    var cities = topojson.feature(topo, topo.objects.cities).features;

    projection.fitExtent(extent, italy);

    // Land
    graphics.beginFill(0xf7f7f7, 1);
    graphics.lineStyle(1, 0xcccccc, 1);
    path(land);
    graphics.endFill();

    // Italy
    graphics.beginFill(0xfcfcfc, 1);
    graphics.lineStyle(1, 0x666666, 1);
    path(italy);
    graphics.endFill();

    // City labels
    var markerWidth = 4;
    graphics.lineStyle();
    graphics.beginFill(0xA45341, 1);
    cities.forEach(function(city) {
        // Marker
        var p = projection(city.geometry.coordinates),
            x = p[0] - markerWidth / 2,
            y = p[1] - markerWidth / 2;
        graphics.drawRect(x, y, markerWidth, markerWidth);

        // Text
        var text = new PIXI.Text(city.properties.name, textStyle);
        text.x = p[0] + 7;
        text.y = p[1] - 8;
        textContainer.addChild(text);
    });

    app.stage.addChild(graphics);
    app.stage.addChild(textContainer);
});



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

Makefile

all: topo.json

BBOX = -15,33.043205,40,49.325213

#_______________________________________________________________________________
# Countries

zip/ne_10m_admin_0_countries.zip:
	mkdir -p $(dir $@)
	curl -LOk 'http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_0_countries.zip'
	mv ne_10m_admin_0_countries.zip zip/ne_10m_admin_0_countries.zip

shp/ne_10m_admin_0_countries.shp: zip/ne_10m_admin_0_countries.zip
	mkdir -p $(dir $@)
	unzip -d $(dir $@) $<
	touch $@

geojson/countries.json: shp/ne_10m_admin_0_countries.shp
	mkdir -p $(dir $@)
	mapshaper \
		-i $< \
		-clip bbox=$(BBOX) \
		-o $@ format=geojson force

#_______________________________________________________________________________
# Populated places

zip/ne_10m_populated_places_simple.zip:
	mkdir -p $(dir $@)
	curl -LOk 'http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_populated_places_simple.zip'
	mv ne_10m_populated_places_simple.zip zip/ne_10m_populated_places_simple.zip

shp/ne_10m_populated_places_simple.shp: zip/ne_10m_populated_places_simple.zip
	mkdir -p $(dir $@)
	unzip -d $(dir $@) $<
	touch $@

geojson/cities.json: shp/ne_10m_populated_places_simple.shp
	mkdir -p $(dir $@)
	mapshaper \
		-i $< \
		-clip bbox=$(BBOX) \
		-o $@ format=geojson force

#_______________________________________________________________________________
# Combine everything as TopoJSON

topo.json: geojson/countries.json geojson/cities.json
	mapshaper \
		-i $^ combine-files \
		-filter 'ADMIN === "Italy"' name=italy + target=countries \
		-dissolve target=countries\
		-filter 'adm0name === "Italy" && scalerank < 5' target=cities \
		-rename-layers land,cities,italy \
		-o $@ format=topojson force