Add a layer to display custom data from GeoJSON file

In this example, we will create a custom layer that fetches GeoJSON data from a file. It will display on top of all other layers.

The GeoJSON file for this example is located at this URL: link.


Try it out in

<!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta charset="UTF-8">
      #my-custom-map {
        width: 600px;
        height: 600px;
        border: 1px solid grey;
        margin-top: 1rem;
  <body class="jmap_wrapper">
    <div id="my-custom-map"></div>
    <script type="text/javascript">
      window.JMAP_OPTIONS = {
        projectId: 1,
        restBaseUrl: "",
        anonymous: true,
        map: {
          containerId: "my-custom-map",
          zoom: 9.573700695830425,
          center: {
            x: -73.7219880403544,
            y: 45.53690235213574
        onReady: () => {
          JMap.Event.Map.on.mapLoad("my-listener", params => {
            const map =;
            map.addSource("my-custom-source", {
              type: "geojson",
              data: ""
              id: "my-custom-layer",
              type: "fill",
              source: "my-custom-source",
              paint: {
                "fill-color": "#0080ff",
                "fill-opacity": 0.5
    <script defer type="text/javascript" src=""></script>  

Dernière mise à jour

K2 Geospatial 2023