CODEWITHSUNDEEP
javascripthtmlcssleaflet
prateek agrawal
prateek agrawal

Reputation: 463

how to put GIF images in leaflet map?

I am new to leaflet. I am trying a plot a LineString geoJson file on map. But instead to just drawing a default line from one coordinate to another I want something like a GIF image of arrow pointing in the direction of flow.

Right now I have this:

example of what I have

But I want a GIF image..something like this..

example of what I'm looking for

Pointing from one co-ordinate to another.

var myStyle_69 = { "color": "#ff6a33", "weight": 1.5, "opacity": 0.65,
};

This the style I am using, It is producing the first image shown.

var network_69 = L.geoJson(link_data_69,{style: myStyle_69});

This is the line were I am using the style. Is the a way were I can just change the orange line into a GIF images of a moving line so that the direction is properly visible.

Thanks

Upvotes: 3

Views: 874

Answers (1)

a_deeee
a_deeee

Reputation: 26

Here what you can do.

  1. Use polylineDecorator plugin
  2. select a gif arrow
  3. map it

Below is the sample code (may require some tweak)

/* eslint-disable no-undef */
/**
 * move marker
 */

// config map
let config = {
  minZoom: 5,
  maxZoom: 18,
  keyboard: false,
};
// magnification with which the map will start
const zoom = 9;
// co-ordinates
const lat = 22.50683;
const lng = 75.660862;

// calling map
const map = L.map("map", config).setView([lat, lng], zoom);

// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);


// --- Example with a rotated marker ---
var pathPattern = L.polylineDecorator(
  [[22.9, 75], [22.18, 75.1], [22.77, 76.0], [22.61, 76.4]],
  {
    patterns: [
      {
        offset: '0%', repeat: 20, symbol: L.Symbol.marker({
          rotate: true, markerOptions: {
            icon: L.icon({
              iconUrl: 'https://media0.giphy.com/media/a2e4I5koserzi0buol/source.gif',
              iconSize: [30, 30]
            })
          }
        })
      }
    ]
  }
).addTo(map);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>arrow marked lines</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
    />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-polylinedecorator/1.0.1/leaflet.polylineDecorator.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="map"></div>
    <script src="script.js"></script>
  </body>
</html>

Upvotes: 0

Related Questions