Today I stumbled upon a “map” on Spiegel Online ( an import news page in Germany ) which shows the spied countries of the NSA. As we already know leaflet quite good and also tried other mapping possibilities I was interested in what they are using for this map which is more informative than this useless map. So looking on the source code: It’s a library called jvectormap.
I just found a nice web interface for converting Shapefiles to geoJSON, the preferred format of vector geodata on the web. And yes, you can also convert back from geoJSON to ESRI Shapefile.
The time when I studied Geography and Mathematics is long ago. So I chose Cartography as one major part of my studies and learned to draw circles and a good cartographic representation of discrete values as an example. As I have chosen this field of cartography and GIS I am well aware of the changes that came to this fields. Especially Cartography made big leaps to be more represented by Geoinformatics than those traditional map makers. And I would assume that it is hard for Geographers and Cartographers to catch up with all those fancy programming stuff. Nevertheless I think…
The web is built upon a small set of languages that are present everywhere. Besides HTML, Javascript is the most common technology around here. So it is not a surprise that web cartography adapts this technology and uses the native javascript object type to store its vector data. The specification is called GeoJSON (for Javascript Object Notation) and extends the JSON model with geometry fields. But if you ever needed to write some lines of Javascript, you’ll know that it’s brackets can drive you crazy. So why would someone want to write table-like structures in such a quirky format? The…
The leaflet API is very simple and tries to deliver best performance and style for commonly used features like tilelayers, points and lines and markers in general. So when we would like to visualize points it is possible to have a very large numbers of points. So lets have a look on such an basic example. I’ve created a point shape file with QGIS which has approx. 1.000 points embedded. Let’s have a look on a normal webmap with this density of information: As you can see, we’ve inlcuded a second js file with the point information called points_rand.js. You…
Thanks to the Twitterline of @directionsmag I’ve seen this new beautiful tiled WMS: OSM roads (new)
When Mike Bostock published his (re-) implementation and demonstration of Visvalingams algorithm for line simplification he attracted considerable attention on that. What is a little bit strange in my opinion. This algorithm is old hat as like the second more well-known algorithm invented by Douglas-Peucker. Both can be seen as the basic concepts for the simplification of linear geometric objects when a quick & easy implementable point reduction is essential. And this is what they can achieve…reducing the amount of points, by analysing the topology of each point…not more but also not less! They are well-known and (relativ) easy implementable…
Within that tutorial I will show you how to: add a geoJSON file using pure Leaflet open a geoJSON file with D3 open a TopoJSON file with D3 add a map-overlay to a leaflet map using D3 Again…we begin with a simple map … already seen in D3 mapping basics and in geoJSON & Leaflet Add a geoJSON file using pure Leaflet You should know how to do this! Just add some very simple data to the map, as we have already done it in a previous post! Import the data file… …add the data to the map… …define the…
Within this, 2nd basic D3 tutorial, I will show you how to combine D3 with Leaflet whereby each library can demonstrate its vantages! These will be the main topics: Set up a map using Leaflet Add an individual zoombar Show the center of the map Show the extent of the map Get a 1st impression of d3.scale() When you are not familiar with D3 or Leaflet I recommend you to apply these tutorials, previously: D3 Basics geoJSON & Leaflet Set up a map using Leaflet Let’s begin by setting up an html-file containing a very simple map. How this can…
Since a while I am programming with the JavaScript library D3.js … and … I am addicted to it! As I would like to present some tutorials on D3’s fantastic possibilities to create and design webmapping solutions … I think it would be good to give you a description on the things that I would identify as elementary. Caution! This tutorial could be a little bit too detailled for you, when you are a skilled JavaScript programmer! I am sorry for that! But when you are a noob in JavaScript, as I was when I began to program with D3,…
The new JSON Format GeoJSON allows you to easily embed geographical features in your leaflet webmap. Additionally you can create it very easily in the open source GIS QGIS aka Quantum GIS. In this tutorial I’ll show you how to export features to GeoJSON from QGIS and embed them into your leaflet map.
In our first post we concentrated on the creation of a table in leaflet and simple ways to administer our data and to embed the map in a webpage. Today we will consume only the table with Leaflet.
