Click here to Skip to main content
15,868,027 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello,

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";


What I have tried:

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

2. Find a way to simply resize the icon that does render, so that I can keep it at the necessary pixel dimensions without having it be too large for my application.

Any help is very much appreciated,

Thank you.
Posted
Comments
phil.o 31-Jan-20 4:28am    
A .svg file is an XML (text) file by nature. Maybe you could use the green Improve question widget which appears on hovering your question, and provide the content of the svg file?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900