I am trying to load my custom topojson file but I am getting this error:
Cannot read property 'type' of undefined
from this line 219 in topojson.min.js v1.6.9
return o.type === "GeometryCollection" ? {
I am using d3 v3.5.3 and topojs v1.6.9 because I haven't been able to get the newer versions working with my custom topojson file.
<script src="d3.min.3.5.3.js"></script>
<script src="d3-geo-projection.min.js"></script>
<script src="topojson.min.1.6.9.js"></script>
<script src="datamaps.usa.min.js"></script>
<script>
var map = new Datamap({
element: document.getElementById('container'),
geographyConfig: {
dataUrl: 'Utah_Municipalities_custom.topojson'
},
scope: 'custom',
setProjection: function(element, options) {
var projection, path;
// Utah Central
projection = d3.geo.conicConformal()
.parallels([39 + 1 / 60, 40 + 39 / 60])
.rotate([111 + 30 / 60, 0]);
path = d3.geo.path()
.projection( projection );
return {path: path, projection: projection};
}
});
</script>
</body>
</html>
Utah_Municipalities_custom.topojson
{"type":"Topology","objects":{"Municipalities.gdb":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[0,1,2,3,4,5,6,7,8]]],"properties":{"COUNTYNBR":"06","NAME":"Farmington","COUNTYSEAT":1,"SHORTDESC":"FARMINGTON","UPDATED":"2018/10/05 00:00:00","FIPS":"24740","ENTITYNBR":3050,"SALESTAXID":"017","IMSCOLOR":3,"MINNAME":"Farmington","POPLASTCENSUS":18752,"POPLASTESTIMATE":22566,"GNIS":"1441004","Shape_Length":31551.51123429135,"Shape_Area":25990884.690499976}},
{"type":"MultiPolygon","arcs":[[[9]]],"properties":{"COUNTYNBR":"01","NAME":"Minersville","COUNTYSEAT":0,"SHORTDESC":"MINERSVILLE","UPDATED":"2012/04/02 00:00:00","FIPS":"50590","ENTITYNBR":3030,"SALESTAXID":"009","IMSCOLOR":3,"MINNAME":"Minersville","POPLASTCENSUS":921,"POPLASTESTIMATE":869,"GNIS":"1430376","Shape_Length":23283.92651941338,"Shape_Area":5645426.963867947}},
{"type":"MultiPolygon","arcs":[[[10]]],"properties":{"COUNTYNBR":"22","NAME":"Francis","COUNTYSEAT":0,"SHORTDESC":"FRANCIS","UPDATED":"2016/04/29 00:00:00","FIPS":"26940","ENTITYNBR":3020,"SALESTAXID":"013","IMSCOLOR":2,"MINNAME":" ","POPLASTCENSUS":1094,"POPLASTESTIMATE":1258,"GNIS":"1428080","Shape_Length":27357.49743179958,"Shape_Area":6733236.332748903}},
etc...
I'm guessing there might be something wrong with my topojson file, or maybe I need to figure out how to create this map with a newer version of topojson or something...
It turns out that it was a Chrome extension for CORS that was causing it to not work for some reason.
Related
I have Japan postal zip code live search function. It works at my xampp. I tried to add this into Laravel app but the search doesn't work.
Here is my whole code which works at XAMPP.
https://jsfiddle.net/blueink/rnsftzg8/
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="//jpostal-1006.appspot.com/jquery.jpostal.js"></script>
<script type="text/javascript">
$(window).ready( function() {
$('#postcode').jpostal({
postcode : [
'#postcode1'
],
address : {
'#address1' : '%3',
'#address2' : '%4',
'#address3' : '%5',
'#address1_kana' : '%8',
'#address2_kana' : '%9',
'#address3_kana' : '%10'
},
trigger : {
'#address1_kana' : true,
'#address2_kana' : true,
'#address3_kana' : false
}
});
$("#address1_kana").on("change", function() {
var val = $("#address1_kana").val();
val = "onchange_" + val;
$("#address1_kana_onchange").val(val);
});
$("#address2_kana").on("change", function() {
var val = $("#address2_kana").val();
val = "onchange_" + val;
$("#address2_kana_onchange").val(val);
});
$("#address3_kana").on("change", function() {
var val = $("#address3_kana").val();
val = "onchange_" + val;
$("#address3_kana_onchange").val(val);
});
});
</script>
What I tried is ...
First I save all js into public/js folder but it didn't work. So
I simple save js file app.blade.php which is header.
Then I save html code into index.blade.php.
I'm wondering why it works at xampp only?
Could you teach me what I missing please?
You can do it like so (depending on your Laravel version, mine is 5.7) :
First, create a route in the "routes" folder like this :
Route::get('test', 'TestController#test')->name('test');
You will be able to access to this road in the /test URL.
In your TestController.php file (usually in app/Http/Controllers), create a method :
public function test(){
return view('test');
}
Then, in resources/views, create a file named test.blade.php
In this file, put the HTML part of this fiddle:
https://jsfiddle.net/dayLkp4s/
After that, you can split header, footer, scripts parts in other files to use them elsewhere.
Useful resources
https://laravel.com/docs/5.7/blade
I wanted to ask you, if there is any possibility to get more than 20 full-res images from Instagram, using the API.
<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
userId: '2201292293',
clientId: 'MY_CLIENT_ID',
accessToken:`'MY_ACCESS_TOKEN',
limit: '364',
sortBy: 'most-liked',
template: '<img src="{{image}}">{{likes}}',
resolution: 'standard_resolution'
});
feed.run();
Thank you in advance, Laurenz Strauch
It may be caused by pagination.
Add
<button id="load-more">
Load more
</button>
to your html. Every time you click on the button, feed.next() will be called and fetches more images if they exist.
<script type="text/javascript">
var loadButton = document.getElementById('load-more');
var feed = new Instafeed({
get: 'user',
userId: '2201292293',
clientId: 'MY_CLIENT_ID',
accessToken:`'MY_ACCESS_TOKEN',
limit: '364',
sortBy: 'most-liked',
template: '<img src="{{image}}">{{likes}}',
resolution: 'standard_resolution'
// every time we load more, run this function
after: function() {
// disable button if no more results to load
if (!this.hasNext()) {
loadButton.setAttribute('disabled', 'disabled');
}
},
});
// bind the load more button
loadButton.addEventListener('click', function() {
feed.next();
});
// run our feed!
feed.run();
</script>
Try this code.
I am using simpleweather plugin for displaying current weather and worked fine till yesterday. Now it shows error as 'cannot read property 'channel' of null'. When I debugged the script, I found that the yahoo data fails to retrieve saying service unavailable hence query.results.channel is null. Can anyone solve my issue? Here is my code:
<script type="text/javascript" src="/sites/dev/_catalogs/masterpage/NMSTheme/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/sites/dev/_catalogs/masterpage/NMSTheme/js/jquery.simpleWeather.js"></script>
<script type="text/javascript" src="/sites/dev/_catalogs/masterpage/NMSTheme/js/yqlgeo.js"></script>
<script type="text/javascript">
$(document).ready(function() {
loadWeather();
setInterval(loadWeather, 6000);
});
function loadWeather() {
debugger;
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position) {
var location = (position.coords.latitude + ',' + position.coords.longitude);
var woeid = undefined;
$.simpleWeather({
location: location,
woeid: woeid,
unit: 'f',
success: function (weather) {
var time = ReturnCurrentTime();
placehtml = '<span><h5>' + weather.city + ',' + weather.region + '</h5><span/>';
datehtml = '<span><h5> ' + weather.forecast[0].day + ',' + time + '</h5><span/>';
html = '<span><h5> ' + weather.temp + '°' + ' ' + weather.units.temp + '</h5><span/>' ;
$("#date").html(datehtml);
$("#place").html(placehtml);
$("#weather").html(html);
},
error: function (error) {
$("#weather1").html('<p>' + error + '</p>');
}
});
});
}
}
</script>
Yahoo have introduced a bug into geo.placefinder querying. Use geo.places.
replace line 26 in simpleWeather.js with:
weatherUrl += 'select * from weather.forecast where woeid in (select woeid from geo.places where text="'+options.location+'" limit 1) and u="'+options.unit+'"';
If you are calling with geolocation lat/long surround options.location with parentheses:
$.simpleWeather({
location: '(' + lat_long + ')',
See more on simpleWeather issues in Github:
https://github.com/monkeecreate/jquery.simpleWeather/issues/174
Yahoo seems to have discontinued the geolocation services needed to find a location based on latitude and longitude. Using simpleWeather's woeid property instead of location still works, though.
I can't get Kartograph.js to display my .svg map. Here's what I've done:
I've successfully made a .svg map from a .shp using the most basic json file I could with kartograph.py, according to Kartograph's docs, doing the basic world.json -o world.svg. Here's the json:
{
"layers": [{
"src": "ne_50m_admin_0_countries.shp",
"simplify": 3
}]
}
I've set up a simple http host with python and directed chrome to the host, since I understand you can't do this locally.
I've written the code below. I don't get any errors, so I don't what I've done wrong. Could it be that I haven't put in any layers? I wanted to make as simple an example as possible for my first try.
<div id="map"></div>
<script>
function loadMap() {
var map = kartograph.map('#map');
map.loadMap('world.svg', function() {
});
};
</script>
<script src="jquery-1.11.0.min.js"></script>
<script src="kartograph.js-master/dist/kartograph.js"></script>
<script src="raphael-master/raphael-min.js"></script>`
Thanks guys.
You must add the layer of the svg file.
In this case: map.addLayer('layer_0');
All the code:
$(function() {
var map = kartograph.map('#map',800,600)
map.loadMap('world.svg', function() {
map.addLayer('layer_0');
});
});
To see the name of the layer i open the svg file with Inkspace, and then press Shift+Control+X.
I'm building an app with Durandal to bundle with PhoneGap. When I'm trying to run the weyland optimizer I'm running into some issues.
The build and optimization runs fine without any errors (I'm using requirejs as optimizer), but when I run the application my kendo ui chart throws an error saying "Uncaught TypeError: Object [object Object] has no method 'kendoChart'".
If I pause in debug mode in chrome where the kendoChart binding is taking place and type "kendo" in the console I get the kendoobject and can view its properties and so on, so it's definitely in the DOM.
Iv'e google around quite a bit and found some threads here on SO but none of them seem to sort my issue out. For instance this thread or this one.
I have a custom knockout binding for the chart, which is provided below.
My weyland.config looks like this:
exports.config = function (weyland) {
weyland.build('main')
.task.jshint({
include: 'App/**/*.js'
})
.task.uglifyjs({
// not uglyfying anything now...
//include: ['App/**/*.js', 'Scripts/durandal/**/*.js', 'Scripts/custom/**/*.js']
})
.task.rjs({
include: ['App/**/*.{js,html}', 'Scripts/custom/**/*.js', 'Scripts/jquery/*.js', 'Scripts/durandal/**/*.js'],
exclude: ['Scripts/jquery/jquery-2.0.3.intellisense.js', 'App/main.js'],
loaderPluginExtensionMaps: {
'.html': 'text'
},
rjs: {
name: 'main',
baseUrl: 'App',
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions',
'knockout': '../Scripts/knockout/knockout-2.3.0',
'kendo': 'empty:', <-- tried refering kendo.all.min, or dataviz.chart or the path
'jquery': '../Scripts/jquery/jquery-2.0.3.min',
'Helpers': '../Scripts/custom/helpers',
........ other scripts ......
},
deps: ['knockout', 'ko_mapping', 'command'],
callback: function (ko, mapping, command) {
ko.mapping = mapping;
}
//findNestedDependencies: true, **<-- tried both true and false here**
inlineText: true,
optimize: 'none',
pragmas: {
build: true
},
stubModules: ['text'],
keepBuildDir: false,
out: 'App/main-built.js'
}
});
};
// The custom binding for the kendo chart
define([
'knockout',
'jquery',
'Helpers',
'kendo/kendo.dataviz.chart.min'
], function (
ko,
$,
helpers,
kendoui
) {
function drawChart(element, values, options) {
$(element).kendoChart({ **<-- this is where I get an error**
... options for chart ...
});
}
// kendoUi data viz chart
ko.bindingHandlers.moodChart = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
//set the default rendering mode to svg
kendo.dataviz.ui.Chart.fn.options.renderAs = "svg"; **<-- this renders no errors**
// if this is a mobile device
if (kendo.support.mobileOS) {
// canvas for chart for you!
kendo.dataviz.ui.Chart.fn.options.renderAs = "canvas";
}
var values = ko.unwrap(valueAccessor());
setTimeout(function () {
drawChart(element, values);
}, 125);
}
};
});
I might add that everything works fine running the not optimized code in a web browser (or a phone for that matter).
I've also tried to shim the kendo path in the config file and add a dependency to jquery, which doesn't really seem to do any difference.
Any help would be appreciated!
For large frameworks like kendo that have their own set of dependencies e.g. jquery version, I tend not to bundle them with my own AMD modules. Personal preference, I know.
Take a look at how you could load jquery , knockout and kendo via normal script tags in the .NET example
<body>
<div id="applicationHost"></div>
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="~/Scripts/whateverKendoVersionGoesHere.js"></script>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/require.js" data-main="/App/main"></script>
</body>
That way jquery and knockout will be loaded as globals. In main.js you'd have to define jquery and knockout in order to make them available to Durandal (see main.js) as Durandal internally is still using them as AMD modules.
requirejs.config({
paths: {
'text': '../Scripts/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
'transitions': '../Scripts/durandal/transitions'
}
});
define('jquery', function () { return jQuery; });
define('knockout', ko);
define(['durandal/system', 'durandal/app', 'durandal/viewLocator'], function (system, app, viewLocator) {
...
});