Tag » OpenLayers

OpenStreetMap vector tiles: mixing and matching engines, schemas and styles

For my next web mapping project, we’ll use vector tiles. Great. And the data will come from OpenStreetMap. Excellent. Now you only have five more questions to answer. 1.078 kata lagi

Mapmaking

Choosing the right map

Have you ever thought about using a map for your website or application? You might have come across a static image of a map in almost every other site that you have visited. 204 kata lagi

GIS

OpenLayers: Align label with Line Feature

In this short post we are going to discuss how to display label on the LineString. This can be useful if you want to add some information along the line, for example start and destination city: 586 kata lagi

OpenLayers

How to Get Mouse Coordinate in OpenLayers

Below is a simple page with an OL map, which alerts mouse position coordinate when user clicks on the map:

 
<!DOCTYPE html>
<html>
<head>
  <title>Mouse Position</title>
  <link rel="stylesheet" href="https://openlayers.org/en/v4.1.0/css/ol.css" type="text/css">
  … 85 kata lagi

HOT Tasking Manager 3.0 Development Underway at thinkWhere

We get to work on some great projects here at thinkWhere, but we’re particularly proud of the project we’ve just started with the Humanitarian OpenStreetMap Team (HOT) 585 kata lagi

Development

Create a Simpe Web Map With Openlayers 3

Create a Simpe Web Map With Openlayers 3

A step by step guide to make a very simple map using openlayes 3.

First let’s make a simple HTML page. 559 kata lagi

Javascript

How to Add a Simple Control to OpenLayers Map

        // create control ui
        var button = document.createElement('input');
        button.type = "button";
        button.value = "Show Zoom Level";
        var element = document.createElement('div');
        // button.className = 'ol-control';
        element.appendChild(button);
        element.style.top = "12px";
        element.style.left = "12px";
        element.style.position="absolute";

        var alertZoomLevel = function (e) {
            alert(olMap.getView().getZoom());
        }.bind(olMap);

        var alertZoomLevelControl = new ol.control.Control({
            element: element
        });

        button.addEventListener('click', alertZoomLevel, false);
        olMap.addControl(alertZoomLevelControl);