drvntaomy06331839 2018-08-13 20:20
浏览 70

映射颜色更改php到.js

I am working on a USA map with states to which states have available properties by changing the color of the state.
I am using Leaflet for the map and have used the Interactive Choropleth Map (https://leafletjs.com/examples/choropleth/) as a basis to build this.

I have added "availability":"2" to the us-states.js file, this is where the number of properties will be shown. I would like to insert a php query into the .js file to pull the number of properties for that state. Here is a sample from the us-states.js file so that you can see the layout:

{"type":"Feature","id":"02","properties":{"name":"North Carolina","availability":"2"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-131.602021,55.117982],

And I am using this to change color:

// get color depending on population density value
function getColor(d) {
return d > 1 ? '#e1cb7f' :
               '#173e34';
    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '',
            fillOpacity: 1.9,
            fillColor: getColor(feature.properties.availability)
        };
}

I have added this to the functions.php file:

wp_register_script( 'scount', get_template_directory_uri() . '/assets  /js/us-states.js' );

// Localize the script with our data that we want to use
$args = array(
'post_type' => 'property',
'fields' => 'ids',
'meta_query' => array(
array(
  'key' => 'state',
  'value' => 'NC'
)
)
);
$results = new WP_Query($args);
$completed = count($results->posts);
wp_localize_script( 'scount', 'completed', $completed );

// The script can be enqueued now or later.
wp_enqueue_script( 'scount' );

And I using this to get the result into the .js file:

alert(completed);

I am getting the result working, this is the output when I view in developer tools:

<script type='text/javascript'>
/* <![CDATA[ */
var completed = 2;
/* ]]> */
</script>

This is the page where the map is located: https://www.thekeithcorp.com/interactive-map/

But it is not changing the map state color! Am I calling incorrectly in the js file? Pulling my hair out, any help would be appreciated!

EDIT

I have isolated the problem to the alert(completed); added to the js file. the page breaks when I add the alert to the js file. Any ideas on how I should add this to the .js file?

This is how it is added:

{"type":"Feature","id":"37","properties":{"name":"North Carolina","availability":alert(completed);},"geometry":{"type":"Polygon","coordinates":[[[-80.978661,36.562108],[-80.294043,36.545677],[-79.510841,36.5402],[-75.868676,36.551154],[-75.75366,36.151337],[-76.032984,36.189676],[-76.071322,36.140383],[-76.410893,36.080137],[-76.460185,36.025367],[-76.68474,36.008937],[-76.673786,35.937736],[-76.399939,35.987029],[-76.3616,35.943213],[-76.060368,35.992506],[-75.961783,35.899398],[-75.781044,35.937736],[-75.715321,35.696751],[-75.775568,35.581735],[-75.89606,35.570781],[-76.147999,35.324319],[-76.482093,35.313365],[-76.536862,35.14358],[-76.394462,34.973795],[-76.279446,34.940933],[-76.493047,34.661609],[-76.673786,34.694471],[-76.991448,34.667086],[-77.210526,34.60684],[-77.555573,34.415147],[-77.82942,34.163208],[-77.971821,33.845545],[-78.179944,33.916745],[-78.541422,33.851022],[-79.675149,34.80401],[-80.797922,34.820441],[-80.781491,34.935456],[-80.934845,35.105241],[-81.038907,35.044995],[-81.044384,35.149057],[-82.276696,35.198349],[-82.550543,35.160011],[-82.764143,35.066903],[-83.109191,35.00118],[-83.618546,34.984749],[-84.319594,34.990226],[-84.29221,35.225734],[-84.09504,35.247642],[-84.018363,35.41195],[-83.7719,35.559827],[-83.498053,35.565304],[-83.251591,35.718659],[-82.994175,35.773428],[-82.775097,35.997983],[-82.638174,36.063706],[-82.610789,35.965121],[-82.216449,36.156814],[-82.03571,36.118475],[-81.909741,36.304691],[-81.723525,36.353984],[-81.679709,36.589492],[-80.978661,36.562108]]]}},

HELP!

  • 写回答

1条回答 默认 最新

  • dongyixiu3110 2018-08-17 13:01
    关注

    I got this to work using this: ( JSON.stringify(completed) )

    Without the ;

    评论

报告相同问题?

悬赏问题

  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)