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);
graphics.beginFill(0xf7f7f7, 1);
graphics.lineStyle(1, 0xcccccc, 1);
path(land);
graphics.endFill();
graphics.beginFill(0xfcfcfc, 1);
graphics.lineStyle(1, 0x666666, 1);
path(italy);
graphics.endFill();
var markerWidth = 4;
graphics.lineStyle();
graphics.beginFill(0xA45341, 1);
cities.forEach(function(city) {
var p = projection(city.geometry.coordinates),
x = p[0] - markerWidth / 2,
y = p[1] - markerWidth / 2;
graphics.drawRect(x, y, markerWidth, markerWidth);
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
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
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
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