Pass drag event from div to mapbox layer

2017-10-11 10:14 SERG imported from Stackoverflow

Here is a jsfiddle https://jsfiddle.net/jes4fggd/. I want to move the map, but as the div follows the mouse pointer looks like the event is catched by div. I want to pass this event to map when the mouse is over the div or buttons. I want only click event is available for buttons but drag is for map. I tried to use voteDiv1.style['pointer-events'] = 'none'; but it is kind of tricky for me. Is there any simple way? Thanks.

var voteDiv1 = document.getElementById('vote1');
map.on('mousemove', function (e) {
    var c = map.project(e.lngLat);
    console.log(c)
    voteDiv1.style.left = (c.x) -50 + 'px';
    voteDiv1.style.top = (c.y) -50 + 'px';
});

See also questions close to this topic

facing alots of bugs in making calculator in react js

hell guys i am trying to make calcultor in react js ..but i faced some problems..my problems is that when i trying to add three number it works perfectly but after that i tried to subtract a number from sum it gives my wrong ans ..every times it add it int instead of subtraction .. here is my code of state

            this.state={
                value:'0',
                firstValue:0,
                operation:'',
                previousvalue:'',
                nextvalue:'',
                counter:0,
                subcounter:0,
                showingTemporaryResult:false,
                newAnswere:'',
                updateValue:''
            }

here is code of operation function where i perfom my all calcultions...

operation(operator)
{
    console.log('operator coming',operator);

    if(operator==='+'||operator==='-')
    {
       // this.setState({operation:operator},()=>{console.log('setting immidiate state',this.state.operation)});

        if(this.state.operation === '+') {
            console.log("are u coming");
            let secondValue = parseInt(this.state.value);
            let firstValue = parseInt(this.state.firstValue);
            console.log('chcking first value ',firstValue);
            console.log('chcking second value ',secondValue);

            let sum = secondValue+firstValue;
            console.log('chcking sum value ',sum);

            this.setState({firstValue:sum,value:sum,secondValue:'',showingTemporaryResult:true},
            ()=>{console.log('first',this.state.firstValue,'second',this.state.secondValue,
            'value===',this.state.value)});
            //console.log('somthing here ');

        }
       else if(this.state.operation === '-') {
            console.log("something coming");
            let secondValue = parseInt(this.state.value);
            let firstValue = parseInt(this.state.firstValue);
            console.log('chcking first value ',this.state.firstValue);
            console.log('chcking second value ',secondValue);

            let subanswer = firstValue-secondValue;
            console.log('chcking sum value ',this.state.subanswer);

            this.setState({firstValue:subanswer,value:'',secondValue:'',showingTemporaryResult:true},
            ()=>{console.log('first',this.state.firstValue,'second',this.state.secondValue,
            'value===',this.state.value)});
            //console.log('somthing here ');

        }
        else if (this.state.operation === '') {
            let firstValue = parseInt(this.state.value);
            this.setState({firstValue});

            this.setState({value:'',operation:operator},()=>{console.log('here is operation setting',this.state.operation)});
           // console.log('or here ');
        }

    }
    else if(operator==='=')
    {
        if(this.state.counter>0)
        {
            let answer=parseInt(this.state.newAnswere)+parseInt(this.state.value);
            console.log('equal operator counter called in plus',this.state.newAnswere,'value',this.state.value);
            this.setState({value:answer});
            console.log("what is thhis value",this.state.value)
        }

       else if(this.state.subcounter>0)
        {
            let answer=parseInt(this.state.newAnswere)-parseInt(this.state.value);
            console.log('equal operator counter called in miunus',this.state.newAnswere,'value',this.state.value);
            this.setState({value:answer,});
            console.log("what is thhis value",this.state.value)
        }
        else if(this.state.operation === '+') {
            let answer = parseInt(this.state.value) + parseInt(this.state.firstValue);
            console.log('firstvalue',this.state.firstValue)
            console.log('value',this.state.value)
            console.log('answere',answer)
            this.setState({value:answer});
            this.setState({counter:1,newAnswere:answer,answer:'',operation:''},()=>{console.log('newcounter',this.state.counter,'newans',this.state.newAnswere)})
            console.log('value=',this.state.value)

        }
        else if(this.state.operation === '-') {
            let answer =  parseInt(this.state.firstValue)-parseInt(this.state.value) 
            console.log('firstvalue',this.state.firstValue)
            console.log('value',this.state.value)
            console.log('answere',answer)
            this.setState({value:answer});
            this.setState({subcounter:1,newAnswere:answer,firstValue:'',secondValue:''},()=>{console.log('newcounter',this.state.counter,'newans',this.state.newAnswere)})
            console.log('value=',this.state.value)

        }


    }



}

and this is my render function

render() {
return (
  <div className="cal">

      <input type="num" name="res" value={this.state.value} disabled style={{height:'8vh',width:'47vh',backgroundColor:'black',color:'white',fontSize:'20px'}}/><br></br>
      <input type="button" name="ac" onClick={() => this.cleardisplay()} value="Ac" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="+/-" onClick={() => this.changesign()} value="+/-" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="%" onClick={() => this.percent()}value="%" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="/" onClick={() => this.operation('/')} value='/' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="7" onClick={() => this.handleclick(7)} value="7" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="8" onClick={() => this.handleclick(8)} value="8" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="9" onClick={() => this.handleclick(9)} value="9" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="*" onClick={() => this.operation('*')} value='*' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="4"  onClick={() => this.handleclick(4)} value="4" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="5" onClick={() => this.handleclick(5)} value="5" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="6" onClick={() => this.handleclick(6)}value="6" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="-" onClick={() => this.operation('-')} value='-' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="1" onClick={() => this.handleclick(1)} value="1" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="2" onClick={() => this.handleclick(2)} value="2" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="3" onClick={() => this.handleclick(3)} value="3" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="+" onClick={() => this.operation('+')} value='+' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>


      <input type="button" name="0" onClick={() => this.handleclick(0)} value="0" style={{height:'5vh',width:'24vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="." onClick={() => this.dot()} value="." style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="=" onClick={() => this.operation('=')} value="=" style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>



  </div>
)
}

please solve this my problem i have to submit it after few hours .. May God Bless you all thanks

CSS3 Flex layout leaving empty space on the right

I use 4 column layout. Every div Width is 25%. Leaving empty space on the right. How to fix it?

body,html{margin:0;padding:0}.flexbox-slider{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:364px;visibility:hidden;margin:auto;padding-bottom:40px}.flexbox-slider .flexbox-slide img{position:absolute}.flexbox-slider .flexbox-slide{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-delay:0s;transition-delay:0s;width:25%;height:364px;position:relative;overflow:hidden;cursor:pointer;visibility:visible}.flexbox-slider .flexbox-slide:after{position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;background-color:rgba(255,255,255,.6);z-index:2;opacity:0}.flexbox-slider .flexbox-slide img{osition:absolute;height:auto;width:auto;min-width:100%;min-height:100%;z-index:1}.flexbox-slider .flexbox-slide .text-block{position:absolute;left:30px;bottom:30px;max-width:400px;padding:20px;border-radius:5px;background-color:rgba(0,0,0,.6);color:#fff;z-index:4;visibility:hidden}.flexbox-slider .flexbox-slide .text-block h3{font-size:20px;font-weight:700}.flexbox-slider:hover .flexbox-slide:hover{-ms-flex-negative:0;flex-shrink:0;width:780px}.flexbox-slide .txt{z-index:89;position:absolute;bottom:-90%;left:0;width:100%;height:100%;display:block;padding:25% 50px 1px;color:#fff;transition:bottom 3s,background-color 0s;-moz-transition:bottom 3s,background-color 0s;-webkit-transition:bottom 3s,background-color 0s;-o-transition:bottom 3s,background-color 0s;-webkit-transition-property:background-color;-webkit-transition-duration:.5s;-webkit-transition-timing-function:ease}.flexslider,.slides li{height:650px}.flexbox-slide .txt span{width:85%;word-wrap:break-word;word-break:normal;display:block;margin-top:30px}.flexbox-slide p{font-size:18px;line-height:25px;color:#fff;font-weight:700}.flexbox-slide .txt:hover{bottom:-45%;background-color:rgba(0,0,0,.39)}.flexslider{position:relative;overflow:hidden;background:url(images/loading.gif) 50% no-repeat}.slides{position:relative;z-index:1}.flex-control-nav{position:absolute;bottom:10px;z-index:2;width:100%;text-align:center}.flex-control-nav a,.flex-control-nav li{display:inline-block;width:14px;height:14px}.flex-control-nav li{margin:0 5px;zoom:1}.flex-control-nav a{line-height:40px;overflow:hidden;background:url(images/dot.png) right 0 no-repeat;cursor:pointer}.flex-control-nav .flex-active{background-position:0 0}.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%}.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute}.flex-direction-nav li a.flex-prev{left:40px;background:url(images/prev.png) center center no-repeat}.flex-direction-nav li a.flex-next{right:40px;background:url(images/next.png) center center no-repeat}

I use 4 column layout.
Every div Width is 25%.
Leaving empty space on the right.
How to fix it?

<html>
 <head></head>
 <body>
  <div class="flexbox-slider my-flexbox-slider" style=""> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> 
   <div class="flexbox-slide"> 
    <img src="https://www.dahuatech.com/upload/2017/10/24/15088249047345orij8.jpg" alt="Slide Image" /> 
   </div> ... 
  </div>
 </body>
</html>

How to find out what's preventing a click from happening?
I have the following link on the page:
```
<a href="/go/some/where.htm">...</a>
```
It lives among HTML that makes up a google.maps.InfoWindow box (which itself doesn't have a click event). This infobox comes up when the user moves the mouse over a mapping pin. For whatever reason, when the user clicks on a link in the infobox, it doesn't fire and I am trying to find out why.

The code base is huge and I have no idea where exactly the preventDefault or propagation is stopped. Is there an easier way? Can I hook into the event flow some way that would show me what is preventing the click?
Glitch flickering with hovering menu list
I have this problem where I want make a box around a menu list. But I've never seen something like this. When I hover over my menu list it flickers? The jsfiddle has the full-code.

Here is the link to jsfiddle
```
li {
  display: inline-block; 

    position:relative;
    line-height: 7vmax;
    vertical-align: middle;
 }



ul li a {color:rgb(23,123,177);text-decoration: none;margin-left:5vmax;font-size:1.3vmax;}

a:hover { background-color: #2c3e50;
  padding: 1vmax;}
```
Does anyone know why is this? And how can I fix this? Thanks.
CSS compatible with all device
So i made a web page here: https://server.zhiyan114.tk/pokemon.html

but I notice the page display is not compatible across all device due to resolution.
```
link to the code: https://pastebin.com/KxkbTaey
```
So how can I change the css so that it looks exactly like the looks on the web page but also looks the same on a smaller resolution instead of some part of the content being cut?

Mapbox GL JS Creating Custom Legend

I have created a custom map in Mapbox Studio with a tileset to create a choropleth map I have then exported the map, to extend the map using Mapbox GL JS.

I have followed the tutorial for creating a legend, which works fine when using Javascipt.j: https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-legend/

I need to use the Mapbox GL JS because I have also created popups with custom CSS which work quite nicely.

"map.legendControl.addLegend(document.getElementById('legend').innerHTML);" causes the map not to display the popups.

Please could someone offer assistance in getting a custom legend in Mapbox to work using Mapbox GL JS, as there is no documentation on the Mapbox website.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Show polygon information on click</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />

<style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>

<body>

<style>
.legend label,
.legend span {
  display:block;
  float:left;
  height:15px;
  width:20%;
  text-align:center;
  font-size:9px;
  color:#808080;
   }
</style>


 <div id='legend'  style='display:none;'>
 <strong>Indices of Multiple Deprivation (IMD) Score </strong>
  <nav class='legend clearfix'>
    <span style='background:#FED976;'></span>
    <span style='background:#FD8D3C;'></span>
    <span style='background:#FC4E2A;'></span>
    <span style='background:#E31A1C;'></span>
    <span style='background:#BD0026;'></span>
    <label>0-19</label>
    <label>20-34</label>
    <label>35-49</label>
    <label>50-64</label>
    <label>65-82</label>
    <small>Source: <a href="https://data.cdrc.ac.uk/dataset/cdrc-english-indices-of-deprivation-2015-geodata-pack-liverpool-e08000012">Consumer Data Research Centre</a></small>
 </div>

<div id='map'></div>
<script>

mapboxgl.accessToken = 'pk.eyJ1IjoidGFzdGF0aGFtMSIsImEiOiJjamZ1ejY2bmYxNHZnMnhxbjEydW9sM29hIn0.w9ndNH49d91aeyvxSjKQqg';

  var map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/tastatham1/cjg3vyld813id2spdnhy4sf9u',
     center: [-2.981979, 53.406315],
     zoom: 11,
     minZoom: 11,
    maxZoom: 15,
 });

   map.legendControl.addLegend(document.getElementById('legend').innerHTML);


</script>

</body>
</html>

Toggle Layers with Mapbox GL JS

I'd like to toggle between layers in Mapbox GL JS. I've created some radio buttons that partly work in that you can switch from one layer to the other but not back or forth.

Below is my code for toggling the layers so far:

    var layerList = document.getElementById('toggle');
    var inputs = layerList.getElementsByTagName('input');

    function switchLayer(layer) {
        var layerId = layer.target.id;
        map.setLayoutProperty(layerId, 'visibility');
    }

    for (var i = 0; i < inputs.length; i++) {
    inputs[i].onclick = switchLayer;
    }

Here's the rest of the code (simplified) and a link to jsbin https://jsbin.com/cigekutiho/edit?html,output

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset=utf-8 />
   <title>Test</title>
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
   <link rel="stylesheet" type="text/css" href="css/style.css" />
   <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'> 
   </script>
   <link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
   <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
   <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet'/>
   <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.min.js'></script>
   <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.2.0/mapbox-gl-geocoder.css' type='text/css' />
   <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet'/>
   <style>
   body { 
      margin: 0; 
      padding: 0;
   }

   #map { 
      position: absolute; 
      top: 0; 
      bottom: 0; 
      width: 100%; 
   }

   #toggle {
   position: absolute;
   padding: 10px;
   background: #dddddd;
   font-family: Helvetica;
  }

  .rounded-toggle {
  position: absolute;
  border: 1px solid rgba(0,0,0,0.4);
  font-family: Helvetica;
  width: 200px;
  height: 47px;
  text-align: center;
  margin-left: 550px;
  top: 10px;
  cursor: pointer;
  }
  </style>
  </head>

  <body>

  <div id='map'></div>
  <div class='rounded-toggle inline' id='toggle'>
     <input id='Test_A' type='radio' name='rtoggle' value='Test_A' checked='checked'>
     <label for='Test_A'>Test A</label>
     <input id='Test_B' type='radio' name='rtoggle' value='Test_B'>
     <label for='Test_B'>Test B</label>
  </div>

  <script>
mapboxgl.accessToken = 'pk.eyJ1IjoibGlhbWJvbHRvbnVrIiwiYSI6IjJyeWxEMzgifQ.OROtY7TDOwNOmAOfCZeo4w';

var map_zoom = L.mapbox.map('map');
map_zoom.removeControl(map_zoom.zoomControl);

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/liamboltonuk/cjfykyscf6i272snyorquvam6',
    attributionControl: false,
    minZoom: 13,
    center: [-0.042582, 51.518039]
});

map.on('load', function () {
map.addSource('Test_A', {
        type: 'vector',
        url: 'mapbox://liamboltonuk.bv937ecm'
    });
map.addLayer({
        'id': 'Test_A',
        'type': 'circle',
        'source': 'Test_A',
        'layout': 
        {
        'visibility': 'visible'
        },
        'paint': {
            'circle-radius': 4,
            'circle-color': {
            property: 'conct',
            type: 'interval',
            stops: [
                [1, '#00477a'],
                [700, '#00477a']
            ]
            },
        'circle-opacity': {
            stops: [
                [12, 1],
                [13, 0.75]
            ] 
        },
    },
        'source-layer': 'LAEI_2013_N0x-5pzq5d'
});
});

map.on('load', function () {
map.addSource('Test_B', {
        type: 'vector',
        url: 'mapbox://liamboltonuk.bv937ecm'
    });
map.addLayer({
        'id': 'Test_B',
        'type': 'circle',
        'source': 'Test_B',
        'layout': 
        {
        'visibility': 'none'
        },
        'paint': {
            'circle-radius': 4,
            'circle-color': {
            property: 'conct',
            type: 'interval',
            stops: [
                [1, '#66e8ff'],
                [700, '#66e8ff']
            ]
            },
        'circle-opacity': {
            stops: [
                [12, 1],
                [13, 0.75]
            ] 
        },
    },
        'source-layer': 'LAEI_2013_N0x-5pzq5d'
});
});

    var layerList = document.getElementById('toggle');
    var inputs = layerList.getElementsByTagName('input');

    function switchLayer(layer) {
      var layerId = layer.target.id;
      map.setLayoutProperty(layerId, 'visibility');
    }

    for (var i = 0; i < inputs.length; i++) {
      inputs[i].onclick = switchLayer;
    }

    </script>
    </body>
    </html>

How I can migrate from `MGLConstantStyleValue` to `NSExpression`

I'm trying to migrate from mapbox-sdk-3.7 to mapbox-sdk-4.0.

I can't understand how to convert this syntax with MGLConstantStyleValue to NSExpression.

let layer = style.layer(withIdentifier: "milestones") as? MGLSymbolStyleLayer
let styledValues: [String: MGLStyleValue<NSString>] = ...

layer.iconImageName = MGLConstantStyleValue(interpolationMode: .identity,
                    sourceStops: styledValues,
                    attributeName: "imageId")

Attribution text not getting captured when using the image of the map canvas Mapbox-GL-JS
I am using ESRI basemaps with Mapbox-GL-JS. I am trying to capture a screenshot of the map using the following code:
```
this.map.getCanvas().toBlob(function (blob) {
   canvasContext.strokeStyle = '#CCCCCC';
   canvasContext.strokeRect(leftPosition, topPosition, width, height);
   var img = new Image();
   img.setAttribute("crossOrigin", "anonymous");
   var srcURL = URL.createObjectURL(blob);
   img.onload = function () {
      canvasContext.drawImage(img, leftPosition, topPosition, width, height);
      URL.revokeObjectURL(srcURL);
   };
   img.src = srcURL;
});
```
I am not able to figure out why the attribution on the Map is not getting captured in the screenshot. I understand that here I am just trying to get the canvas of the map. I even tried adding text elements to the map canvas and that doesn't work either. I have markers & routes, which get in the image correctly. I also tried using the Mapbox basemap and try the same, but faced the same issue.

Any help is highly appreciated!
Reading coordinates from GeoJson data providing from a Get request

I'm starting with Angular4 and I'm dealing with CSV file that I convert to Geojson with Flask and I get the converted data in my angular application, I only display it in the console but I have absolutely no idea how to go through it and read the coordinates to display It on my map. (I'm displaying It from the folder saved in Assets) I know I'm asking for too much but I can't even find a tutorial to check.

Related questions

Pass drag event from div to mapbox layer

See also questions close to this topic