Skip to main content

Leaflet and CartoDB - The perfect combination

What is currently the most easy and convenient way to publish geographic data stored within a database via the web? One easy way doing so is the combination from Leaflet and CartoDB.

Leaflet is an open source library for publishing online maps. The JS library is lightweight (just 33 KB), and has all the features most developer expect from interactive maps. Furthermore functionalities can be extended via plug-ins developed by the open source community around leaflet.

CartoDB is a online database which can also be published on an own web server. The database allows to store geographic entities with geometry type point, lines and polygon. The database provides several APIs including an SQL API where it is possibly to execute native SQL queries. In addition CartoDB provides a leaflet JS plug in to access data directly as layer.

Some basic example to start with:

1) Create sample Data within CartoDB
2) Include Leaflet and CartoDB JS libraries within your HTML page.
3) Create a Leaflet map object and link it to a DIV object within the HTML page:

HTML part:
<div id="map" ></div>
JavaScript part:

// create a map in the "map" div, set the view to a given place and zoom var map = L.map('map').setView([51.505, -0.09], 13);

4) add a basemap Layer (e.g. Openstreetmap) to the map)

// add an OpenStreetMap tile layer L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

4) add sample data stored witin Cartodb to the map

// add an Cartodb layer var cartodb_leaflet = new L.CartoDBLayer({
        map: map,
        user_name: "user_name",
        table_name: "table_name",
        query: "SELECT * FROM {{table_name}}",
        tile_style: "#{{table_name}}{polygon-fill:blue;  polygon-opacity: 0; line-color: yellow;  line-width: 5;  line-opacity: 0.7}",
        interactivity: "cartodb_id",
        featureClick: function(ev, latlng, pos, data) { },
        featureOver: function(){},
        featureOut: function(){},
        attribution: "CartoDB",
        auto_bound: true
      });
map.addLayer(cartodb_leaflet);


5) finnished.

Comments

Popular posts from this blog

ArcGIS 10.1 Beta Launch and Deprecation Plan

ArcGIS 10.1 Beta 1 is now available for download to all those that have registered and been accepted into the program. Downloads have been made available from the Customer Care Portal and information and how to access this can be found on the ArcGIS Beta Community Site. This site is the portal for all information related to the beta.

One big drawback of ArcGIS 10.1:
There is no change in Desktop at 10.1 in regards to 64-bit support. ArcMap is a 32-bit application, but ESRI do support it running on 64-bit Windows. Currently ESRI is workung on a research project for native 64-bit ArcGIS application but it is not going to make 10.1.
ArcGIS 10.1 Deprecation Plan:
ARCGIS DESKTOP 10.1 ArcGIS 10.1 will no longer support the Solaris versions of ArcReader and ArcGIS Engine.ArcGIS 10.1 will be the last release supporting ArcReader for Linux.  SUSE Linux Enterprise Server 11 and Red Hat Enterprise Linux Server 5 will be supported.  However, SUSE Linux Enterprise Server 10 and Red Hat Enterprise Lin…

Tesla Model 3 - Dashboard Concept

Will 2017 be the year of Tesla Model 3? At last years Telsa Model 3 introduction event Elon Musk stated that first Model 3 will be shipped to customers by the end of 2017. Latest news show that currently production lines are set up and first Model 3 shall be produced by July 2017 and delivered mainly to employees as beta tester. For this reason it is very likely that we will see some Model 3 on Californias roads by mid of this year. Some expert expect the total production of cars for 2017 to 30000 up tp 50000 cars, where high production rates will be reached not before 2018.

The design of the Model 3 is well known since the introduction event back in March 2016, and it is expected that the outside will not change much. But there are some roumors that there will be quite some changes on the interior of the car especially the dashbord.

Recently I came across a new dashboard study. Have a look here.


Tesla Model 3 Future Windshield HUD User Interface Introduction

Precize 3-D model of Mount Everest

The highest mountain on earth is now available as 3D terrain model free for download. The resolution of the model is 50 by 50 cm. Not everyone can climb the Mount Everest (even though several hundred cimbs are registered each year, and still claim their victims) from their living room.


Video: Mount Everest in 3D - Herstellervideo (1:34)

Scientists of the DLR (Deutsches Institut für Luft- und Raumfahrt) together with 3D Realitymaps and Digitalglobe have calculated a realistic three-dimensional model based on satellite imagery. The software for calculating the model was originally used for making 3D models of Mars. According to scientists currently it is not possible to create a more precise model based on civil satellites. The 8848 meters high mountain was recorded by various satellites and different angles. These data builds the foundation of the terrain model and 3D textures. To use the model on your personal computer you have to install a special viewer which can be downloaded via htt…