Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Map’ Category

We usually use Google Maps with its default styles which is the most familiar one to all.

However, starting with v3 of the Google Maps API, it can be customized with ease so that the look and feel can match the website’s design.

Snazzy Maps

Snazzy Maps is a website which shares many Google Maps styles freely.

There are already 20+ styles and, once clicked, the JavaScript array for the style is displayed and can be downloaded.

Map Icons is a free icon font that is built to be used with Google Maps API + Google Places API.

These icons extends the Google Maps Marker object to enable either an image or SVG marker to be used with the icon placed on top as a label. But, but they can be a perfect fit for any mapping-related content/app.

It includes 100+ icons with items for almost any type “points of interest” and location markers.

Map Icons

  • Tags:
  • Filed under: Design, Font, Goodies, Map, Other License
  • 1 Comment
  • When building any map-related applications, there are many popular providers to select from like Google Maps or Bing Maps and they provide APIs for integration.

    However, using an open source engine and the ability to switch providers anytime offers more freedom + flexibility.

    Cesium, a WebGL-powered JavaScript mapping library, offers just that by being provider-agnostic.

    Cesium

    It has support for 3 different views: 3D globe, 2D map, and 2.5D Columbus View where transitioning from one to another is just a line of code.

    Drawing any type of shapes, highlighting specific regions and interacting with the map using mouse or touch is pretty easy.

    Cesium comes as a single JS file and work in all major browsers including mobile.

  • Tags:
  • Filed under: Goodies, Map, Other License
  • 0 Comments
  • Map Icons Designer is a free set of 200+ icons that are designed to be used in maps.

    The set is available in 2 formats: PSD (vector shape) + PNG and includes items for transportation, hotels, restaurants, animals and much more.

    There are also 10 different-styled location pins where all look great.

    And, the set is completely free to be used in both personal + commercial projects.

    Map Icons Designer

    Kartograph is a framework for creating interactive maps without any mapping provider (like Google Maps).

    It consists of 2 libraries:

    • a Python library thatrenders vector maps from shapefiles or PostGIS and converts them to SVG
    • a JavaScript library for turning these SVG data into interactive maps
    Kartograph

    If you already have the SVG data (for ex: any drawing can be converted to SVG with Adobe Illustrator), only the JavaScript library can help too.

    The JS library uses jQuery + Raphaël, outputs can be styled with CSS and a very good documentation is provided.

  • Tags:
  • Filed under: Goodies, LGPL License, Map
  • 0 Comments
  • Maps are used so widely in web design and they are usually expected to be interactive when presenting data.

    It can be the branches of an international company, statistics about  countries or just destinations to visualize. Like said, lots of uses.

    Simplemaps is a website that provides professional, highly-customizable and interactive maps built with JavaScript and SVG (or Flash).

    SVG Maps - Simplemaps

    SVG has a wide browser-support and it works very well on mobile + tablet as well.

    There are maps for “world/countries, continents, USA and Canada” and the usage +customization doesn’t require advanced development knowledge. It works by simply editing a text file and a detailed, step-by-step documentation exists.

    Also, Simplemaps website has an online customization tool that enables the users to edit the countries, change colors, descriptions, links and more.

    Considering that the maps are in vector (SVG), tiny or huge, they work great on all sizes. And, they even come with a zoom-in functionality.

    SVG USA map

    With some JavaScript, it is so easy to add new features to them like tooltips, selectable regions and much more.

    To sum up, SVG maps are definitely the way to go for modern web maps and Simplemaps has a wide range of products on the field.

    P.S. For Flash fans, the website also offers similar maps in Flash with their source code.

    How to join the giveaway?

    Simplemaps is giving away 3 licenses (for a map of your selection). Commenting to this post is enough.

    Winners will be selected on 22 April 2013 (1 week later) with the query below and announced as an update to this post.:

    SELECT * FROM wp_comments WHERE comment_post_id=3981 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

    Good luck to all.

    The winners

    Here they are:

    • Roshin C (comment #1260748)
    • Jed (comment #1260726)
    • DR (comment #1260708)
    Congratulations and thanks to everyone for joining.

    1260708

    Maplace.js is a jQuery plugin that simplifies integrating Google Maps into websites.

    It works with the latest Google Maps API (v3) and has methods for adding markers + custom content and drawing paths, polygons or routes.

    Maplace.js

    There are options for defining the zoom level or controls to be displayed (zoom, map/satellite..).

    The plugin allows customizing almost everything from the icons used to texts and colors.

    It has callbacks on each action and comes with a very well documentation.

    It was very exciting to explore the cities when Google Maps had integrated 3D drawings of each building in some cities.

    OSM Buildings is a JavaScript library that enables us to create a similar functionality using any mapping provider.

    OSM Buildings

    The library uses Leaflet mapping engine and HTML5 canvas (rather than WebGL) and requires the geometry data of the area to be visualized.

    There are various free sources for such data and the library can be handy when creating such custom visualizations for a limited area.

  • Tags:
  • Filed under: Goodies, Map, Other License
  • 0 Comments
  • DataMaps is a script to display any data interactively and beautifully inside maps.

    It comes with ready-to-use maps for world map with countries, USA with states and a combined one.

    The map data is stored as JSON and any custom maps can be created by following the structure.

    DataMaps

    DataMaps makes use of D3, Backbone + Underscore and comes as a jQuery plugin (or a as a standalone Backbone view).

    When browsing through the maps, the hovered or clicked parts can be highlighted and be set to display custom information.

    Also, it has support for visualizing data as bubbles in different sizes to show the effect of the data over a region.

  • Tags:
  • Filed under: Goodies, Map, MIT License
  • 1 Comment
  • Nokia was providing online maps for a long time and, recently, they have renewed it with exciting features and a fresh name: HERE.

    HERE Maps is developer friendly, has a complete API and tools that makes any integration possible.

    For web developers, to simplify working with HERE even more, there is an unofficial jQuery plugin named jHERE.

    jHERE - HERE Maps

    The plugin is compatible with both jQuery or Zepto.JS and  has support for creating simple-to-complex maps.

    It is possible to define the locations, enable/disable the tools (zoom, scale bar, map type, etc.), add markers or even overlay data from a KML file.

  • Tags:
  • Filed under: Goodies, Map, MIT License
  • 0 Comments
  • Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com