how to replace circle with icon in L.circleMarker
var style_station = {
radius: 12,
stroke:false,
weight: 1,
opacity: 1,
fillOpacity: 1,
// color: '#00ABDC',
};
$.getJSON("url", function(stationexits){
exitlayer = L.geoJson(stationexits, {
onEachFeature: onEachStation,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, style_station);
}
});
You will have to return a L.Marker
Only then will you be able to set your own icon.
I dont want to use L.Marker as L.circleMarker have own advantages over L.marker
I did below and its working for me
1)Created a svg pattern like
<svg>
<defs>
<pattern id="bustop_icon" x="0" y="0" width="18" height="18">
<image xlink:href="img/images/bus-icon.png" x="3" y="5" width="18" height="20" />
</pattern>
</defs>
</svg>
2)set className in style
var style_busstops = {
radius: 12,
stroke:false,
weight: 1,
opacity: 1,
fillOpacity: 1,
className : 'bus_stops'
};
L.geoJson(busstops, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, style_busstops);
}
});
3)Add 'fill' css in class bus_stops
.bus_stops {
fill: url(#bustop_icon);
}
Related
I am using material ui on a react-typescript project and need the bio to be mostly hidden until the show more button is pressed. In the docs for Collapse from material-ui it says you can pass in a number value for timeout and it will determine the amount of time that the transition takes to expand the card. However, I have passed in a large number here and the transition still only takes less than a second. Should I be passing the timeout prop in differently?
export default function ProfileBio({ bio }: Props) {
const [expandBio, setExpandBio] = useState<boolean>(false);
const [animation, setAnimation] = useState({});
const classes = useStyles();
const [bioHeight, setBioHeight] = useState(classes.notExpanded);
// bio
const BIO = [
{
name: 'Bio',
icon: <IconStyle icon={fileTextOutline} />,
content: bio
}
];
const fields = [
{
name: 'bio',
content: bio,
displayName: 'Bio'
}
];
const handleExpandClick = () => {
setExpandBio(!expandBio);
};
const CurrentContent: Function = () => {
return BIO.map((bioField) => (
<DetailsWrapper key={bioField.name}>
<Collapse
sx={{ mt: 0 }}
collapsedSize={72}
in={expandBio}
easing="ease"
timeout={60000}
onEnter={() => console.log('entered')}
>
<Typography
variant="body2"
color="text.primary"
style={{ whiteSpace: 'pre-wrap' }}
// className={bioHeight}
>
{bioField.icon}
{bioField.content}
</Typography>
</Collapse>
</DetailsWrapper>
));
};
const ShowMoreButton: Function = () => {
if (!edit) {
return (
<ExpandMore
stretchedLink
expand={expandBio}
onClick={handleExpandClick}
aria-expanded={expandBio}
aria-label="show more"
>
<Typography variant="button">
show
{expandBio ? 'less' : 'more'}
</Typography>
<ExpandMoreIcon className="chevron" />
</ExpandMore>
);
}
return <Box />;
};
return (
<Card>
<CardHeader
title="Bio"
action={
<IconButton
onClick={() => {
setEdit(!edit);
}}
>
<CreateIcon />
</IconButton>
}
/>
<CardContent>
<CurrentContent />
</CardContent>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
backgroundColor: '#FFFFFF'
}}
>
<ShowMoreButton />
</Box>
</Card>
);
}
I'm quite new in webdevelopment. With that said, I'm trying to change the box color using Material-UI but it's not working. (color=success.main)
Currently, the color that I'm getting is the primary blue. I've tried to change every box component but It didn't really work for any of them.
import React from "react";
import { palette } from '#material-ui/system';
import {
AppBar,
Toolbar,
Box,
Link,
Hidden
} from '#material-ui/core';
import { makeStyles } from '#material-ui/core/styles';
import './Navbar.css';
const useStyles = makeStyles({
links: {
padding: '0 50px',
color: 'white',
"&:hover": {
textDecorationColor: "green",
cursor:'pointer'
}
},
});
export default function Navbar() {
const Navbar = useStyles();
return(
<Box component='nav' color="success.main">
<AppBar>
<Toolbar>
VK Design
<Box m='auto'>
<Hidden only='xs'>
<typography><Link className={Navbar.links} underline='hover'>HOME</Link></typography>
<typography><Link className={Navbar.links} underline='hover'>PORTFOLIO</Link></typography>
<typography><Link className={Navbar.links} underline='hover'>ABOUT</Link></typography>
<typography><Link className={Navbar.links} underline='hover'>CONTACT</Link></typography>
</Hidden>
</Box>
</Toolbar>
</AppBar>
</Box>
)
};
Use "bgcolor" instead of "color"
<Box
bgcolor="primary.main"
> ... </Box>
I think you should define a class to set color for .
You should try:
...
const useStyles = makeStyles((theme) => ({
root: {
color: theme.palette.primary.main
},
links: {
padding: '0 50px',
color: 'white',
"&:hover": {
textDecorationColor: "green",
cursor:'pointer'
}
},
}));
export default function Navbar() {
const Navbar = useStyles();
return(
<Box component='nav' className={Navbar.root}>
...
</Box>
)
};
I've been making a Leaflet map for a while and trying to figure out the way to make it so if I click one of the polygon in GeoJSON layer, it will remove the current layer and replace it with another layer.
Likewise, if I click it again, it will remove the new layer and replace it with previous layer.
I've been trying to tinker with different stuff but nothing works. This is one of my recent attempt.
<script type="text/javascript" src="provinces.js"></script>
<script>
var map = L.map('map').setView([-2.5, 119], 5);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap © CartoDB',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map);
// get color depending on population density value
function getColor(d) {
return d > 5000 ? '#800026' :
d > 2500 ? '#BD0026' :
d > 1000 ? '#E31A1C' :
d > 500 ? '#FC4E2A' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.kode)
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#ccc',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function addNewBoundary(e) { // this function doesn't do anything
var newLayerBoundary = new L.geoJson();
newLayerBoundary.addTo(map);
$.ajax({
dataType: "json",
url: "province-details.geojson",
success: function(data) {
$(data.features).each(function(key, data) {
newLayerBoundary.addData(data);
});
}
}).error(function() {});
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: clearLayers // with this it just clears the layers before being clicked
});
}
geojson = L.geoJson(provinces, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
</script>
var layers = [firstLayer,secondLayer]
function switchLayers(){
if(map.haslayer(layers[firstLayer])){
map.addLayer(layers[secondLayer]);
map.removeLayer(layers[firstLayer]);
}else{
if(map.haslayer(layers[secondLayer])){
map.addLayer(layers[firstLayer]);
map.removeLayer(layers[secondLayer]);
}
}
I have a custom sidebar sitting on top of my map. Within the sidebar are checkboxes:
<label><input type="checkbox" name="points" value="addressPoints" /> COUNTY</label>
I would like the map to load with none of the GeoJSON layers pre-loaded and the functionality to toggle a layer on by clicking the checkbox.
Below is the Javascript I am using:
//Create Variable called 'map' and Set Options
var map = L.map('map', {
center: [35.132703, -92.347412], //Faulkner County
zoom: 11,
minZoom: 8,
maxZoom: 18,
keyboard: true,
zoomControl: false,
});
//Add Base Map Tile Layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); //ROADMAP
//L.tileLayer('http://{s}.tiles.mapbox.com/v3/moklick.lh736gg3/{z}/{x}/{y}.png').addTo(map); //SATELLITE
//L.tileLayer('http://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png').addTo(map); //TERRAIN
//L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png').addTo(map); //HEATMAP
//Create Variable for Default Polygon Style
var defaultStyle = {
color: "#3498db",
weight: 2,
opacity: 1,
fillOpacity: 0.4,
fillColor: "#3498db"
};
//Create Variable for Highlighted Polygon Style on Mouseover
var highlightStyle = {
color: "#e74c3c",
weight: 3,
opacity: 1,
fillOpacity: 0.3,
fillColor: "#e74c3c"
};
var onEachFeature = function(feature, layer){
layer.bindPopup("<h4>Voting Precinct:</h4>" + feature.properties.NAME10),
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.NAME10);
};
/*//Add GeoJSON for County Outline
L.geoJson(faulknerCounty, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.popupContent);
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.NAME10);
}
}).addTo(map);*/
/*//Add GeoJSON for Voting Precincts
L.geoJson(votingPrecincts, {
style: defaultStyle,
onEachFeature: onEachFeature
}).addTo(map);*/
//Add GeoJSON for JP Districts
L.geoJson(jpDistricts, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup("<h4>Justice of the Peace District: " + feature.properties.district);
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.district);
}
}).addTo(map)
/*//Add GeoJSON for School Districts
L.geoJson(schoolDistricts, {
style: defaultStyle,
onEachFeature: function (feature, layer) {
layer.bindPopup("<h4>School District: " + feature.properties.name);
layer.setStyle(defaultStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
layer.setStyle(highlightStyle);
});
layer.on("mouseout", function (e) {
layer.setStyle(defaultStyle);
});
})(layer, feature.properties.name);
}
}).addTo(map);*/
new L.Control.GeoSearch({
provider: new L.GeoSearch.Provider.Google(),
position: 'topright',
showMarker: false,
retainZoomLevel: false,
}).addTo(map);
Create (but do not .addTo(map)) each geoJSON layer you need...so your init would look likevar schoolDistricts = L.geoJSON(...., then watch for the change event on your checkboxes to add or remove the appropriate layers with map.addLayer(layerToAdd) and map.removeLayer(layerToRemove).
There are numerous references to leaflet.label working fine with GeoJSON points, but I've yet to find one example.
Here's what i've tried so far:
//Add labels layer
var labelStyle = {
color: '#CCC',
opacity: 1
};
var labelMarkerOptions = {
opacity: 0,
fillOpacity: 0
};
var labelLayer = L.geoJson(labels, {
pointToLayer: function (feature, latlng) {
return L.Marker(latlng, labelMarkerOptions);
},
onEachFeature: function (feature, layer) {
layer.bindLabel(feature.properties.Name, {noHide:true});
}
});
labelLayer.eachLayer(function(l) {l.showLabel();});
map.addLayer(labelLayer);
layerControl.addOverlay(labelLayer, 'Site Labels');
This adds a layer of my points, but with the default larkers, and no labels. Thanks for any help you can provide.
If you want to show only the label, return L.circleMarker instead of L.Marker:
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, labelMarkerOptions);
},
If you need L.Marker for some other reason, bind the label directly to marker:
pointToLayer: function (feature, latlng) {
return L.Marker(latlng, labelMarkerOptions).bindLabel(feature.properties.Name, {noHide:true});
},