{"action":"created","issue":{"url":"https://api.github.com/repos/YUzhva/react-leaflet-markercluster/issues/69","repository_url":"https://api.github.com/repos/YUzhva/react-leaflet-markercluster","labels_url":"https://api.github.com/repos/YUzhva/react-leaflet-markercluster/issues/69/labels{/name}","comments_url":"https://api.github.com/repos/YUzhva/react-leaflet-markercluster/issues/69/comments","events_url":"https://api.github.com/repos/YUzhva/react-leaflet-markercluster/issues/69/events","html_url":"https://github.com/YUzhva/react-leaflet-markercluster/issues/69","id":323633358,"number":69,"title":"Help Clustering GeoJSON Points","user":{"login":"RyanMarshall5765","id":27895355,"avatar_url":"https://avatars1.githubusercontent.com/u/27895355?v=4","gravatar_id":"","url":"https://api.github.com/users/RyanMarshall5765","html_url":"https://github.com/RyanMarshall5765","followers_url":"https://api.github.com/users/RyanMarshall5765/followers","following_url":"https://api.github.com/users/RyanMarshall5765/following{/other_user}","gists_url":"https://api.github.com/users/RyanMarshall5765/gists{/gist_id}","starred_url":"https://api.github.com/users/RyanMarshall5765/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RyanMarshall5765/subscriptions","organizations_url":"https://api.github.com/users/RyanMarshall5765/orgs","repos_url":"https://api.github.com/users/RyanMarshall5765/repos","events_url":"https://api.github.com/users/RyanMarshall5765/events{/privacy}","received_events_url":"https://api.github.com/users/RyanMarshall5765/received_events","type":"User","site_admin":false},"labels":[{"id":526494207,"url":"https://api.github.com/repos/YUzhva/react-leaflet-markercluster/labels/help%20wanted","name":"help wanted","color":"128A0C","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-05-16T13:57:56Z","updated_at":"2018-05-16T20:32:14Z","closed_at":"2018-05-16T20:32:14Z","author_association":"NONE","body":"Hello, if anyone can help it would be much appreciated. I am trying to take points from GeoJSON and cluster them. The libraries I have found to do this for react-leaflet seem to be out of date and no longer supported. I was wondering if there was a way I could accomplish this with react-leaflet-markercluster?\r\n\r\nMy Code Without Attempt:\r\nimport React, { Component } from 'react';\r\nimport { Map, TileLayer, GeoJSON, MapLayer } from 'react-leaflet'\r\nimport L from 'leaflet'\r\nimport { testJson } from '../data/places.js'\r\nimport '../containers/App.css';\r\nimport MarkerClusterGroup from 'react-leaflet-markercluster';\r\nimport '../node_fix/MarkerCluster.css';\r\nimport '../node_fix/MarkerCluster.Default.css';\r\n\r\nconst mark = L.markerClusterGroup();\r\nlet geojson = testJson();\r\nconst simpleCrossBlack = L.icon({\r\n    iconUrl: 'images/simple_cross_black.svg',\r\n    iconSize: [38, 95],\r\n});\r\nconst simpleCrossBlue = L.icon({\r\n    iconUrl: 'images/simple_cross_blue.svg',\r\n    iconSize: [38, 95],\r\n});\r\nconst orthodoxCross = L.icon({\r\n    iconUrl: 'images/orthodox_cross_black.svg',\r\n    iconSize: [38, 95],\r\n});\r\n\r\nclass MapOne extends Component {\r\n    constructor(props) {\r\n        super(props)\r\n        this.onEachFeature = this.onEachFeature.bind(this)\r\n        this.pointToLayer = this.pointToLayer.bind(this)\r\n        this.state = {\r\n            center: [35.53, 15.20]\r\n        }\r\n    }\r\n    onEachFeature = (feature, layer) => {\r\n        const popUpContent = [];\r\n        for (const prop in feature.properties) {\r\n            if (feature.properties[prop] != null) {\r\n                popUpContent.push('<h3>' + prop + ': </h3>' + feature.properties[prop])\r\n            }\r\n        }\r\n        layer.bindPopup(popUpContent.join())\r\n    }\r\n\r\n    pointToLayer = (feature, latlng) => {\r\n        switch (feature.properties['place-details-order']) {\r\n            case 'Basilian':\r\n                return L.marker(latlng, { icon: orthodoxCross });\r\n            case 'Augustinian Canons':\r\n                return L.marker(latlng, { icon: simpleCrossBlue });\r\n            default:\r\n                return L.marker(latlng, { icon: simpleCrossBlack });\r\n        }\r\n    }\r\n\r\n\r\n    render() {\r\n        return (\r\n            <div>\r\n                <Map\r\n                    center={this.state.center}\r\n                    zoom={8}\r\n                >\r\n                    <TileLayer\r\n                        url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\r\n                        maxZoom={18}\r\n\r\n                    />\r\n\r\n                    <GeoJSON\r\n                        data={geojson}\r\n                        onEachFeature={this.onEachFeature}\r\n                        pointToLayer={this.pointToLayer}\r\n                    />\r\n                </Map>\r\n            </div>\r\n        );\r\n    }\r\n}\r\nexport default MapOne;\r\n\r\nedit: assuming the code wont box in because of single quotes in the code. Sorry for the eye sore here.\r\n\r\nWhat I changed attempting to accomplish this that I have seen results is by changing the point to layer to look like: \r\n\r\n` pointToLayer = (feature, latlng) => {\r\n        switch (feature.properties['place-details-order']) {\r\n            case 'Basilian':\r\n                return mark.addLayer(L.marker(latlng, { icon: orthodoxCross }));\r\n            case 'Augustinian Canons':\r\n                return mark.addLayer(L.marker(latlng, { icon: simpleCrossBlue }));\r\n            default:\r\n                return mark.addLayer(L.marker(latlng, { icon: simpleCrossBlack }));\r\n        }\r\n    }\r\n`\r\nHowever, this places the markers but then the popup content is the same on every single marker. Assuming this has something to do with how the layering is occuring. I am very new to this and not quite sure where to go from here.\r\n\r\nThank you to anyone who may be able to point me in the right direction.\r\n\r\nPS: If this is not the correct place to post something like this sorry and could you point me towards the correct area."},"comment":{"url":"https://api.github.com/repos/YUzhva/react-leaflet-markercluster/issues/comments/389655799","html_url":"https://github.com/YUzhva/react-leaflet-markercluster/issues/69#issuecomment-389655799","issue_url":"https://api.github.com/repos/YUzhva/react-leaflet-markercluster/issues/69","id":389655799,"user":{"login":"RyanMarshall5765","id":27895355,"avatar_url":"https://avatars1.githubusercontent.com/u/27895355?v=4","gravatar_id":"","url":"https://api.github.com/users/RyanMarshall5765","html_url":"https://github.com/RyanMarshall5765","followers_url":"https://api.github.com/users/RyanMarshall5765/followers","following_url":"https://api.github.com/users/RyanMarshall5765/following{/other_user}","gists_url":"https://api.github.com/users/RyanMarshall5765/gists{/gist_id}","starred_url":"https://api.github.com/users/RyanMarshall5765/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/RyanMarshall5765/subscriptions","organizations_url":"https://api.github.com/users/RyanMarshall5765/orgs","repos_url":"https://api.github.com/users/RyanMarshall5765/repos","events_url":"https://api.github.com/users/RyanMarshall5765/events{/privacy}","received_events_url":"https://api.github.com/users/RyanMarshall5765/received_events","type":"User","site_admin":false},"created_at":"2018-05-16T20:32:13Z","updated_at":"2018-05-16T20:32:13Z","author_association":"NONE","body":"Ahh okay, thank you so much. I was trying to do that but had it was <MarkerClusterGroup <GeoJson /> />. Guessing it was a weird syntax error. Again really appreciate the help."}}
{"actor":{"display_login":"RyanMarshall5765"}}