Code Monkey home page Code Monkey logo

leaflet-color-markers's Introduction

leaflet-color-markers

color variations of the standard leaflet markers:

Color Marker 2x Marker Color Inside Color Outside
Blue Marker Blue 2x Marker Blue #2A81CB #3274A3
Gold Marker Gold 2x Marker Gold #FFD326 #C1A32D
Red Marker Red 2x Marker Red #CB2B3E #982E40
Green Marker Green 2x Marker Green #2AAD27 #31882A
Orange Marker Orange 2x Marker Orange #CB8427 #98652E
Yellow Marker Yellow 2x Marker Yellow #CAC428 #988F2E
Violet Marker Violet 2x Marker Violet #9C2BCB #742E98
Grey Marker Grey 2x Marker Grey #7B7B7B #6B6B6B
Black Marker Black 2x Marker Black #3D3D3D #313131

Usage

var greenIcon = new L.Icon({
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

leaflet-color-markers's People

Contributors

demiankatz avatar diwic avatar fanquake avatar heptalium avatar mgax avatar patrickp-rthinfo avatar pointhi avatar rdch106 avatar wiperawa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

leaflet-color-markers's Issues

migrate away from deprecated bower.json

Bower is deprecated. Popular alternatives are yarn or npm "plus X" where X stands for additional solutions like browserify.
If we want to go with npm, we must create a package.json and publish a package on npmjs.com.

GET https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png net::ERR_CERT_COMMON_NAME_INVALID

Got this error when I added the code to my dbHelper.js
2018-10-08 23_19_35-_e__users_abhishek_downloads_mws-restaurant-stage-1_js_dbhelper js - notepad
Initially, I thought it is Chrome Bug followed the guidelines from this https://support.symantec.com/en_US/article.TECH240507.html to set up the registry for it but didn't work.
2018-10-08 23_24_07-restaurant reviews
I tried opening the site in the website in Incognito mode to know if any extension is hindering the execution but that's also not the case.
See the above map instead of markers it looking like this??

Please help me out how to solve this???

Still shows default blue marker

I've followed the readme and didn't work.
I use developer tool to see that Icon object, the iconurl is correct.
What could be the cause?

my bad, it is overlapped.

How can I set the custom marker for my leaflet OpenStreetMap with NUXT.js

I am trying to change marker icon for separate marker on my OpenStreetMap.

  mapIconsReinit(L) {
    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.imagePath = ''
    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require('@/assets/img/map_markers/default/marker-icon-2x.png'),
      iconUrl: require('@/assets/img/map_markers/default/marker-icon.png'),
      shadowUrl: require('@/assets/img/map_markers/default/marker-shadow.png'),
    });
  },

  getMarkerIcon(L, color) {
    return L.divIcon({
      iconRetinaUrl: require('@/assets/img/map_markers/marker-icon-2x-' + color + '.png'),
      iconUrl: require('@/assets/img/map_markers/marker-icon-' + color + '.png'),
      shadowUrl: require('@/assets/img/map_markers/marker-shadow.png'),
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      shadowSize: [41, 41]
    })
  }

First function works fine with paths like '@/...', but the 2nd one - no.

Default marker works fine:

L.marker([marker.lat, marker.lng]).addTo(_context.map)

but if I try to use custom marker:

L.marker([marker.lat, marker.lng], {icon: this.getMarkerIcon(L, "red")}).addTo(_context.map)

I see a white square

enter image description here

Install via Bower

I'm trying to better manage my project's dependencies, and in support of that, it would be nice to be able to load this via Bower. I would be willing to put together a pull request with a bower.json if that would be helpful -- just let me know, as I don't want to spend the time before I know that you will be interested in merging it.

Thanks!

Svg sources

Would be awesome to open source the vector sources (.svg, .ai) as well !

White?

These are very handy. Thanks for making them available. Would you be averse to making one in white (and maybe other colors or patterns, like diagonal lines)? I could do one based on yours, but I'm guessing you have a quick way and would make more ones more consistent with the existing.

License

Under which license have you released your images and JavaScript files?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.