Map Marker Icons generator – create beautiful icons for your map

Now you can create amazing custom map marker icons for your map with a few clicks with our new Marker Icons API. We combined the most popular map pin shapes with Material Design and Font Awesome icons set. Moreover, provide you easy to use and flexible API that lets you create icons of different sizes and colors. Is it Free? Yes, the API is Free to use for all our registered users, however, we set a limit of 250.000 requests/month for Free plans.

As all our APIs the Map Marker API works via HTTP Get requests. It returns a png-image of specified parameters as a result. Here is an example of the API URL:

https://api.geoapify.com/v1/icon/?icon=coffee&color=%23ff9999&size=large&type=awesome&apiKey=YOUR_API_KEY
Map Marker icons colors and types

Map Marker icon types

Icon forms and options

The API gives you a choice of different icon forms: circle, Material Design Marker Pin, and Font Awesome Marker pin. Furthermore, you can add an icon to the Marker. Optionally you can draw an icon on a white circle or without. By default, all pin markers have a shadow. However, you can always remove it with a noShadow parameter.

Map Marker icon sizes

The API allows setting marker icon size: small, medium, large, x-large, or xx-large.

Marker Colors

No limits here! You can use any color that fits your project or you just like! Note, that for markers without white circle the color if the icon is automatically adjusted. In addition, you can change stroke color and shadow color. For example, make the shadow not dark, but light to make it look good on dark-color maps.

Icon sets

Map Marker Icon content

With Marker Icons API you can use Material Design and Font Awesome icon sets. All you need to do is just to specify the icon name in the URL.

Both icon sets have a permissive license and allowed to be used in commercial projects. The Material Design is available under Apache license version 2.0, the Font Awesome web font – under SIL OFL 1.1 license.

Marker icon text

Marker Icons text examples

Text icon content is an alternative to icon content. You can add a custom text, define the text size, add or remove the white circle.

Register and generate Map Marker Icons for Free

Get an API key and generate custom icons for your projects. Learn more about Geoapify APIs.

Address autocomplete component – npm package

Get a location from an address and address from a location – this is the main purpose of the Geocoding API. However, it’s not how it’s usually used in real-life. In real-life people enter one by one symbol into address autocomplete field, get suggestions and select the correct result there.

We already published articles describing how to create an address autocomplete from scratch with JSFiddle code samples. In this article, we would like to introduce you to an npm package that allows adding geocoding with autocomplete into your project with a few lines of code only.

We’ve developed a base Geocoding Autocomplete JS Library, that turns a DIV-container into an Address field with autocomplete. Moreover, we’ve added components for React and Angular that wrap the JavaScript library and provide a convenient interface for it.

All 3 packages use Geoapify Geoacoder API as the geocoder and support all parameters of the API:

  • You can make the autocomplete show only countries, cities, states, streets, or amenities;
  • Set location bias. So the autocomplete will return first results near the location;
  • Choose between different languages. For example, depending on the language you will get “Germany”, “Deutschland”, “Allemagne” or “Германия” in the search results;
  • Filter results. For example, search only in given countries.

You require your own API key to make Geocoding API calls. Get an API key on MyProjects Geoapify. The APIs have the Freemium pricing model. So you can start for Free and extend when you need.

@geoapify/geocoder-autocomplete

Geoapify Geocoder Autocomplete is the lightweight JavaScript library, that lets you add an address input with autocomplete into your web app. It has 0 dependencies and easy to customize. Furthermore, it already includes a few style themes for both light and dark backgrounds.

Installation

npm install @geoapify/geocoder-autocomplete

or

yarn add @geoapify/geocoder-autocomplete

Usage

  • Prepare a DIV-container with position: relative:
.autocomplete-container {
    position: relative;
}
<div id="autocomplete" class="autocomplete-container"></div>
  • Add Geoapify Geocoder Autocomplete:
import { GeocoderAutocomplete } from '@geoapify/geocoder-autocomplete';
 
const autocomplete = new GeocoderAutocomplete( document.getElementById("autocomplete"),  'YOUR_API_KEY', { /* Geocoder options */ });
 
autocomplete.on('select', (location) => {
    // check selected location here 
});
 
autocomplete.on('suggestions', (suggestions) => {
    // process suggestions here
});
  • Add styles to make the control work properly. For example, you can do it by importing style into your css-file:
 
@import "[email protected]/geocoder-autocomplete/styles/minimal.css";

You can easily customize the input. Read more about provided themes and CSS-classes on @geoapify/geocoder-autocomplete page.

@geoapify/angular-geocoder-autocomplete

Geoapify Angular Geocoder Autocomplete is an Angular component that wraps the Geoapify Geocoder Autocomplete and provides easy to use interface for it. Instead of functions and callbacks, the component lets you work with Angular Inputs and Outputs.

Installation

npm install @geoapify/geocoder-autocomplete @geoapify/angular-geocoder-autocomplete

or

yarn add @geoapify/geocoder-autocomplete @geoapify/angular-geocoder-autocomplete

Usage

  •  Import the GeoapifyGeocoderAutocompleteModule module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GeoapifyGeocoderAutocompleteModule } from '@geoapify/angular-geocoder-autocomplete';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GeoapifyGeocoderAutocompleteModule.withConfig('YOUR_API_KEY')
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • Import Geoapify Geocoder Autocomplete styles. For example, in ‘angular.json’:
"styles": [
    ...
    "node_modules/@geoapify/geocoder-autocomplete/styles/round-borders.css",
    "src/styles.scss"
],
  • Add the component into your template:
<geoapify-geocoder-autocomplete 
    [value]="displayValue"
    [type]="options.type"
    [lang]="options.lang"
    [countryCodes]="options.countries"
    [position]="options.position"
    [limit]="options.limit" 
    (placeSelect)="placeSelected($event)" 
    (suggestionsChange)="suggestionsChanged($event)">
</geoapify-geocoder-autocomplete>

@geoapify/react-geocoder-autocomplete

Geoapify React Geocoder Autocomplete is an Angular component that wraps the Geoapify Geocoder Autocomplete and provides access to all API parameters via the component properties.

Installation

npm install @geoapify/geocoder-autocomplete @geoapify/react-geocoder-autocomplete

or

yarn add @geoapify/geocoder-autocomplete @geoapify/react-geocoder-autocomplete

Usage

  • Create the GeoapifyContext and set you API key there;
  • Import Geoapify Geocoder Autocomplete styles;
  • Add GeoapifyGeocoderAutocomplete to your code:
import React, { useState } from 'react'
import { GeoapifyGeocoderAutocomplete, GeoapifyContext } from '@geoapify/react-geocoder-autocomplete'
import '@geoapify/geocoder-autocomplete/styles/minimal.css'
 
const App = () => {
  ...
 
  function onPlaceSelect(value) {
    console.log(value);
  }
 
  function onSuggectionChange(value) {
    console.log(value);
  }
 
  return <GeoapifyContext apiKey="YOUR_API_KEY_HERE">
      <GeoapifyGeocoderAutocomplete placeholder="Enter address here"
        type={type}
        lang={language}
        position={position}
        countryCodes={countryCodes}
        limit={limit}
        placeSelect={onPlaceSelect}
        suggestionsChange={onSuggectionChange}
        />
    </GeoapifyContext>
}
 
export default App

Map libraries comparison: Leaflet vs Mapbox GL vs OpenLayers – trends and statistics

When you need to add a map to your application, the first question that pop-ups in your head is “Which map library to use?”. If you start to google, you’ll find out soon that at the moment the Leaflet, Mapbox GL, OpenLayers are the most popular libraries for displaying interactive maps on a web page.

In this article, we want to compare the libraries and check actual trends and statistics. So you can choose the most promising option for you.

We used NPM Trends and Google Trends to get the data and create beautiful visualizations.

Leaflet vs Mapbox GL vs OpenLayers

LeafletMapbox GLOpenLayers
The open-source JS library for interactive maps. A simple interface, great documentation, and a huge community allow you to get results and solve your tasks quickly.
Unfortunately, not developed actively any longer.
Powerful and effective SDK for web maps developed by Mapbox. As Leaflet library creators developed Mapbox GL now, you can see some similarities between 2 libraries. However, Mapbox GL gives you more opportunities, data visualization options and opens the vector maps world for you.Familiar with GIS technologies? Then OpenLayers can be the perfect option for you! The OpenLayers is not only about displaying maps, but also visualizing and analyzing geographical data. It could be a bit more complicated at the beginning but allows you to create more powerful solutions.
Vector maps support
The core functionality of Leaflet doesn’t have vector tiles support. Nevertheless, you can visualize vector tiles by using external plugins. For example, Mapbox GL Leaflet.
Vector maps support
Mapbox is a pioneer in vector maps technologies. The Mapbox Style Specification for vector maps, which is very popular now and used by Geoapify as well, is natively supported by Mapbox GL.
Vector maps support
OpenLayers has native support for vector maps but the ol-mapbox-style plugin is required to create a map with Mapbox Style Specification.
JSFiddle code sampleJSFiddle code sampleJSFiddle code sample

NPM trends for the map libraries

The number of downloads for npm packages gives a great indication of how popular each library is. Here is npm trends statistics for the last 12 month:

npm trends: Leaflet, Mapbox GL, Openlayers

And the charts look really interesting! Except for temporary Mapbox GL usage spike in February – June 2020, Leaflet keeps on par with Mapbox GL. In comparison with other map libraries, OpenLayers looks stable. And all three top mapping libraries demonstrate steady growth – there is no indication of developers switching from one to another.

In the same time, Open Layers usage seems to be growing faster than Leaflet or Mapbox GL. If we check the statistics for OpenLayers only, we can prove that:

npm trends: OpenLayers

Statistics from GitHub show us how many times a library was “stared”:

GitHub statistics: Leaflet, Mapbox GL, Openlayers

And here we see that Leaflet is 4.5 times more popular at the moment than Mapbox GL, and 4 times more popular than OpenLayers.

Google Trends for the map libraries

Google search keywords trends are another good measure of popularity. However, here we’ve faced with a problem. While “Leaflet” and “OpenLayers” are unique names, “Mapbox GL” is often googled as “Mapbox”. So we decided to add both “Mapbox GL” and “Mapbox” to give you an overview:

The chart shows that interest in each library more or less stays on the same level. In other hands, statistics by regions provide some interesting results as well:

Map libraries comparison by region

Leaflet leads the keywords list in almost all countries. However, Mapbox/Mapbox GL is popular in China, the United States, Belorus, and Canada. And OpenLayers is in request in South Korea, Croatia, and Finland.

Conclusions

It’s always a matter of taste when you are trying to choose the best from several good options. Nevertheless, we hope that the numbers and charts we gave you in this article will help you to make the right decision.

Leaflet, Mapbox GL, and OpenLayers code samples

We’ve created code samples to help you develop a custom map for your website. Visit the Geoapify Documentation page to learn how to add a map to your React-, Angular-, or Vue-webapp.

Geoapify offers map tiles that can be used with all the libraries. We provide vector and raster maps of different styles and colors. Learn more about Geoapify Map Tiles.

Angular + Leaflet: step by step tutorial to add a map

This tutorial helps you to create an Angular-based application and add a Leaflet map as a component. In our tutorial, we provide a way to use the Leaflet library without additional components. Moreover, we prepared an Angular-project for you that contains already a component skeleton for the map component.

We use Geoapify map tiles for the tutorial. You can choose between different map styles and colors there. Check the Geoapify Maps Playground that contains Live demo and code samples.

We use Mapbox style specification, which describes how the map is rendered, tile server locations, and provides values for map settings. For example, minimum, and maximal zoom levels.

Before you start

Step 1. Create an Angular project

You can use the Angular project template we’ve prepared for you or create a new one with Angular CLI. The project template contains already a component for a map:

  • Download or clone the GitHub repository
  • Switch to the project folder: cd angular-based-project
  • Run npm install to install libraries and dependencies
  • Run ng serve for a dev server
  • Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Step 2. Display a map with Leaflet

Install Leaflet + Mapbox GL plugin

By default, Leaflet doesn’t support vector tiles and Mapbox Style specifications. Therefore you need to install the Mapbox GL Leaflet plugin together with Leaflet to generate a map from style.json:

npm i leaflet mapbox-gl mapbox-gl-leaflet
Install Leaflet + Mapbox GL types

Type definitions will allow you to utilize Leaflet and Mapbox types in your code. Moreover, some IDEs provide code completion when the types are available:

npm i @types/leaflet @types/mapbox-gl-leaflet -dev
Add Leaflet and Mapbox styles

Leaflet and Mapbox styles are required to render a map and it’s elements correctly. We recommend you to add styles to the angular.json:

"projects": {
    "angular-project": {
      ...
      "architect": {
        "build": {
          "options": {
            ...
            "styles": [
              "src/styles.scss",
              "node_modules/mapbox-gl/dist/mapbox-gl.css",
              "node_modules/leaflet/dist/leaflet.css"
            ],
            "scripts": []
          },
          ...
        }
      }
    }
}

You will need to restart the dev server to apply changes from angular.json.

Add a Leaflet map to an Angular-component

Open MyMapComponent if you use our template or create a new component.

  • Remove placeholder and create ViewChild for the div element. Add ngAfterViewInit() lifecycle hook that is called after Angular has fully initialized a component’s view:
<div class="map-container" #map></div>
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-my-map',
  templateUrl: './my-map.component.html',
  styleUrls: ['./my-map.component.scss']
})
export class MyMapComponent implements OnInit, AfterViewInit {

  @ViewChild('map')
  private mapContainer: ElementRef<HTMLElement>;

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
  }
}
  • Add a Leaflet map to the component:
import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import  * as L from 'leaflet';
import 'mapbox-gl-leaflet';

@Component({
  selector: 'app-my-map',
  templateUrl: './my-map.component.html',
  styleUrls: ['./my-map.component.scss']
})
export class MyMapComponent implements OnInit, AfterViewInit {

  private map: L.Map;

  @ViewChild('map')
  private mapContainer: ElementRef<HTMLElement>;

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    const myAPIKey = "YOUR_API_KEY_HERE";
    const mapStyle = "https://maps.geoapify.com/v1/styles/osm-carto/style.json";

    const initialState = {
      lng: 11,
      lat: 49,
      zoom: 4
    };

    const map = new L.Map(this.mapContainer.nativeElement).setView(
      [initialState.lat, initialState.lng],
      initialState.zoom
    );

    // the attribution is required for the Geoapify Free tariff plan
    map.attributionControl
      .setPrefix("")
      .addAttribution(
        'Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | © OpenStreetMap <a href="https://www.openstreetmap.org/copyright" target="_blank">contributors</a>'
      );

    L.mapboxGL({
      style: `${mapStyle}?apiKey=${myAPIKey}`,
      accessToken: "no-token"
    }).addTo(map);
  }
}

Build the application

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

More code sample

Find more Live demos, JSFiddle samples and Code samples on the Geoapify API Documentation page.

React + Leaflet: project template and step by step tutorial

This tutorial helps you to create a React-based application with a Leaflet map. We’ve prepared for you a project template and instructions to develop a Map app from scratch.

We use Geoapify map tiles and Mapbox Style specification to create a map. So at the end of the tutorial, your application will be able to render both vector and raster maps with the Leaflet library.

Before you start

Step 1. Create a React project

We’ve prepared a React-based project template for you. The project already contains a component to visualize a map and uses for Sass3 CSS pre-processor:

  • Download or clone the GitHub repository
  • Switch to the project folder: cd react-based-project
  • Run npm install to install libraries and dependencies
  • Run npm start to start the server
  • Open http://localhost:3000 to view the page in the browser

As the second option, you can generate a React project by yourself with Create React App.

Step 2. Display a map with Leaflet

Install Leaflet + Mapbox GL plugin

By default, Leaflet doesn’t support vector tiles and Mapbox Style specifications. You need to install the Mapbox GL Leaflet plugin together with Leaflet to generate a map from style.json:

npm i leaflet mapbox-gl mapbox-gl-leaflet
Add Leaflet and Mapbox styles

You need to import styles to display a map and it’s elements correctly. You can add the styles to the index.scss file:

@import '~mapbox-gl/dist/mapbox-gl.css';
@import '~leaflet/dist/leaflet.css';
Add a map to a React-component

We already prepared a React-component for you – “src/components/my-map.jsx”:

 
import React, { useEffect } from 'react'; 
import './my-map.scss';

function MyMap() {

  useEffect(() => {
    console.log('This is called when the component is mounted!');
  }, []);

  return (
    <div className="map-container">
      <div className="placeholder">
        <span className="placeholder-text">The map will be displayed here</span>
      </div>
    </div>
  )
}

export default MyMap;

Create one if you’ve generated a project with Create React App. Use can use the MyMap component as an example.

  • Remove the placeholder and add the element reference
  • Make the useEffect() function to be called when the element is ready:
import React, { useEffect } from 'react';
import './my-map.scss';

function MyMap() {
  let mapContainer;

  useEffect(() => {

  }, [mapContainer]);

  return (
    <div className="map-container" ref={el => mapContainer = el}>
    </div>
  )
}

export default MyMap;
  • Add a Leaflet map to the component:
import React, { useEffect } from 'react';
import './my-map.scss';
import L from 'leaflet';
import {} from 'mapbox-gl-leaflet';

function MyMap() {
  let mapContainer;

  useEffect(() => {
    const initialState = {
      lng: 11,
      lat: 49,
      zoom: 4
    };

    const map = L.map(mapContainer).setView([initialState.lat, initialState.lng], initialState.zoom);

    // the attribution is required for the Geoapify Free tariff plan
    map.attributionControl.setPrefix('').addAttribution('Powered by <a href="https://www.geoapify.com/" target="_blank">Geoapify</a> | © OpenStreetMap <a href="https://www.openstreetmap.org/copyright" target="_blank">contributors</a>');

    var myAPIKey = 'YOUR_API_KEY_HERE';
    const mapStyle = 'https://maps.geoapify.com/v1/styles/osm-carto/style.json';

    const gl = L.mapboxGL({
      style: `${mapStyle}?apiKey=${myAPIKey}`,
      accessToken: 'no-token'
    }).addTo(map);
  }, [mapContainer]);

  return (
    <div className="map-container" ref={el => mapContainer = el}>
    </div>
  )
}

export default MyMap;

Note! You may require to restart the development server to apply all changes.

Build the application

Run npm run build from the application directory. This builds the app for production to the build folder.

More code sample

Find more Live demos, JSFiddle samples and Code samples on the Geoapify API Documentation page.

Map animation with Mapbox GL

What can be more eye-catching than smooth, interactive, three-dimensional map animation? Impress your visitors by displaying your map data in stunning 3D!

Previously we have compared OpenLayers and Leaflet map libraries. Both are great choices if you want to add interactive map to your website. They are free, battle-tested, extensible and supported by active communities.

But what if you need a very fast, animated, eye-catching 3D map? Both Leaflet API and OpenMapLayersAPI do not support 3D and free-form map rotation. In this case Mapbox GL map library can be a great option.

Mapbox GL JS is one of the most advanced JavaScript map rendering libraries when it comes to smooth interactive animation. Mapbox GL API is slightly harder to use and not compatible with existing Leaflet plugins and examples. But it is using hardware-accelerated WebGL technology to dynamically draw data with the speed and smoothness of a video game.

In this article I’ll show you how to animate and implement 3D map rotation around a selected point. The end result should look like this:

Map rotation animation in 3D with Mapbox GL

If you short on time and just looking for the complete HTML code, you can find it at the bottom of the page.

Setting up our 3D map

As first step, we need to add imports for Mapbox GL library and its CSS style sheet into the HEAD of our page

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.js"></script>

Once imported, we can define a <div> element which will host map visualization and add Javascript code which will initialize Mapbox GL to render our map in 3D with specified initial location, zoom, pitch and bearing. Please do not forget to put your real API key instead of “YOUR_API_KEY” placeholder in the map tiles URL.

<div id='map'></div>
<script>
var map = new mapboxgl.Map({
    container: 'map',
    style: {
        "version": 8,
        "sources": {
            "basemap": {
                "type": "raster",
                // map tile source 
                "tiles": [
                    "https://maps.geoapify.com/v1/tile/carto/{z}/{x}/{y}.png?api_key=YOUR_API_KEY"
                ],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "basemap",
            "type": "raster",
            "source": "basemap",
            "minzoom": 0,
            "maxzoom": 22
        }]
    },
    center: [-73.991462, 40.724637], // starting position
    zoom: 12, // starting zoom
    pitch: 60, // starting pitch in degrees
    bearing: 0, // starting bearing in degree
});

This should give us basic interactive 3D map. You should be able to move the map to a different locations, zoom in and out, and change view angle.

Interactive 3D map view of Manhattan, NY
Interactive 3D map view of Manhattan, NY

Adding map rotation animation

As next step, let’s add dynamic map animation, which will change view angle to create effect of flying around the map center. Please add the following code into our <script> block and refresh the page:

function rotateCamera(timestamp) {
    // rotate at approximately ~10 degrees per second
    map.rotateTo((timestamp / 100) % 360, {duration: 0});
    // request the next frame of the animation
    requestAnimationFrame(rotateCamera);
}

map.on('load', function () {
    // start the animation
    rotateCamera(0);
});

Final steps

As the last step, let’s add basic map navigation controls and basemap attribution.

// map navigation controls
map.addControl(new mapboxgl.NavigationControl());

// attribution
map.addControl(new mapboxgl.AttributionControl({
	compact: false,
	customAttribution: 'Powered by <a href="https://geoapify.com/">Geoapify</a> | © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}));
Complete map with controls and attribution
Complete map with controls and attribution

Complete HTML code

Final version of the HTML page could look like this. Please feel free to copy the code, insert API key and open it in your browser to see how it works.

<html>
<head>
    <meta charset='utf-8' />
    <title>Mapbox GL example: rotate map animation in 3D</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/0.53.1/mapbox-gl.js"></script>
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
var map = new mapboxgl.Map({
    container: 'map',
    style: {
        "version": 8,
        "sources": {
            "basemap": {
                "type": "raster",
                // map tile source 
                "tiles": [
                    "https://maps.geoapify.com/v1/tile/carto/{z}/{x}/{y}.png?api_key=YOUR_API_KEY"
                ],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "basemap",
            "type": "raster",
            "source": "basemap",
            "minzoom": 0,
            "maxzoom": 22
        }]
    },
    center: [-73.991462, 40.724637], // starting position
    zoom: 12, // starting zoom
    pitch: 60, // starting pitch in degrees
    bearing: 0, // starting bearing in degree
});

function rotateCamera(timestamp) {
    // rotate at approximately ~10 degrees per second
    map.rotateTo((timestamp / 100) % 360, {duration: 0});
    // request the next frame of the animation
    requestAnimationFrame(rotateCamera);
}

map.on('load', function () {
    // start the animation
    rotateCamera(0);
});

// map navigation controls
map.addControl(new mapboxgl.NavigationControl());

// attribution
map.addControl(new mapboxgl.AttributionControl({
	compact: false,
	customAttribution: 'Powered by <a href="https://geoapify.com/">Geoapify</a> | © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}));
	
</script>

</body>
</html>

Summary

Mapbox GL generally requires more JavaScript code to be written than Leaflet and can be more complicated to maintain.

So, you may ask when to use Leaflet and when to use Mapbox GL?

The answer is simple – if you don’t need 3D and extremely fast animation then Leaflet would be the best choice. It has biggest community, best documentation, extensive set of plugins and works well in any situation. And if you really need advanced 3D maps with animations and top rendering speed on modern devices – then Mapbox GL is your friend.