Reputation: 21
I am trying to use my own icons in a css file to display icons on a react website. Below is the code that leads up to the point where I actually create the markers (I am using MapBox API. (See bottom of code)
The problem is that a.) when i create my own SVG files in illustrator and either put them in the project directory or make a link for them for the file to reference, neither appear in my map. b.) I found someone else's icon and used that, and it can render that icon, but it is way too big.
import React from "react";
import mapboxgl, { LngLat } from "mapbox-gl";
import "./GoogleMap.css";
import db from "../../firebaseConfig";
import { Marker } from "react-simple-maps";
var image01 = require("../../assets/droneIcon.png");
var firebase = require("firebase/app");
require("firebase/auth");
require("firebase/database");
const auth = require("../../auth.json");
mapboxgl.accessToken =
"pk.eyJ1IjoiamVycnkyMDE4IiwiYSI6ImNrNjA1N3d5NTA0Zmwza252OXNpcWpzYWEifQ.lBwSxATvYgUqiyGfIvC3tw";
class GoogleMap extends React.Component {
constructor(props) {
super(props);
this.state = {
lng: 50,
lat: 50,
zoom: 10
};
}
componentDidMount = () => {
const { lng, lat, zoom } = this.state;
var droneList = [];
const map = new mapboxgl.Map({
container: this.mapContainer,
style: "mapbox://styles/mapbox/streets-v9",
center: [lng, lat],
zoom: zoom
});
map.on("move", () => {
const { lng, lat } = map.getCenter();
this.setState({
lng: lng.toFixed(4),
lat: lat.toFixed(4),
zoom: map.getZoom().toFixed(2)
});
});
var el = document.createElement("div");
el.className = 'marker';
el.style.backgroundImage = 'url(https://cdn1.iconfinder.com/data/icons/appliance-1/100/Drone-07-512.png)';
el.style.width = "500px";
el.style.height = "500px";
I have tried creating my own SVG, making a raw git file for it to host and reference it, however I can't find anywhere to make that minified raw SVG file into a readable image for the javascript code. I have found that SVG files that are created by others and posted can be placed into the map api and successfully display.
I need to either 1. Find a way to display SVG images, since the current methods I have been trying are resulting in blank images, or just the alpha channel of the image
Any help is very much appreciated,
Thank you.
Upvotes: 1
Views: 9943
Reputation: 29521
I need an SVG file for an icon in my code. There are two options for the program to reference that SVG file; either it is stored locally in the program's directory, or it simply looks at a url for it.
When referencing an SVG in CSS, you can use an inline Data URI.
Instead of the protocol:
https://
you'll need to begin your Data URI with MIME Type and encoding:
data:image/svg+xml;utf8,
But after that, you can add the SVG without any changes:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" fill="rgb(188, 187, 187)" /><path d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z" fill="rgb(244, 128, 35)" /></svg>
Working Example:
div {
width: 180px;
height: 180px;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><path d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" fill="rgb(188, 187, 187)" /><path d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z" fill="rgb(244, 128, 35)" /></svg>');
}
<div></div>
Upvotes: 2