Trying to go through the "openlayers-workshop" on Windows 8. In the "Basic - Creating a Map" section following the instructions and making the example map.html file. When viewing the html file in my browser the following error occurs:
ReferenceError: ol is not defined
Sourcefile: http://localhost:4000/map.html
Line: 18
I have followed the tutorial as far and installed the required prerequisites.
Is there something I haven't installed yet to make it work?
Any other Windows users out there that have the same problem?
Go to http://openlayers.org/download/ and download latest *dist.zip file. Extract this file. In the extracted folder there will be 3 files, you only need ol.js and ol.css. In the directory you have map.html create 2 folders, one called "css" and another called "js". In the "css" folder placer the ol.css file from the extracted folder. In the "js" folder placer the ol.js file from the extracted folder. In your map.html file change the line on line 4(may be different, you should see a line),
<link rel="stylesheet" href="/ol.css" type="text/css">
Change this to
<link rel="stylesheet" href="css/ol.css" type="text/css">
Similarly on line 12 of the map.html file change
<script src="/loader.js" type="text/javascript"></script>
To
<script src="js/ol.js" type="text/javascript"></script>
Now save and reload the map.html file, now it should display correctly. The reason you where original getting a error was because you hadn't included the openlayers library in your map.html file correctly.
Related
I've been migrating a Rails 6 project from Sprockets to Webpacker, and now from Webpacker to Shakapacker.
I followed the installation instructions for Shakapacker to migrate from V5 to Shakapacker: https://github.com/shakacode/shakapacker/blob/master/docs/v6_upgrade.md#how-to-upgrade-to-webpacker-v600rc6-from-v5
After getting Shakapacker set up and running, I've noticed some differences in the output in the <HEAD> element of a rendered page:
1 <head>
2 ...
3 <link rel="stylesheet" media="screen" href="/packs/css/app_assets_packs_styles_application_scss.css">
4 ...
5 <script src="/packs/js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_esm_js-node_mod-4ef364.js" defer="defer"></script>
6 ...
7 <script src="/packs/js/application.js" defer="defer"></script>
8 </head>
Relative path is shown explicitly in URIs and in filenames
Line 3, file extension included in filename
All files are missing a fingerprints
The app is running, so it's not necessarily broken, but this difference in output is ringing some light alarm bells that there may be something funny going on and may disrupt things further down the line.
Is this something to be concerned about?
In any case, does anyone know how to fix this?
In my _Layout page, following works:
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css")" />
This doesn't work (the styles do get applied, however images referenced in the css don't render):
#Styles.Render("~/bundles/kendoStyle")
here's the Bundle def in App_start -> BundleConfig.cs:
//Kendo Styles:
bundles.Add(new StyleBundle("~/bundles/kendoStyle").Include(
"~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css"
, "~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css"
, "~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css"
, "~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css"
//, "~/Kendo/Content/contextMenu.css"
));
What am I doing wrong here? (please note, "Kendo" is setup as an mvc4.5 web app under my main website
Image paths are relative to the folder in which styesheets are located. For example, an image might be referenced like this:
.k-icon {
background-image: url('BlueOpal/sprite.png');
}
Because your bundle redefines the path to your stylesheets, the browser attempts to download the image from ~/bundles/BlueOpal/sprite.png, which doesn't exist. The actual path to the image is ~/Kendo/Content/kendo/2013.2.918/BlueOpal/sprite.png.
Everything works fine when you link to your stylesheets directly (without the bundle) because relative paths correctly point to images on your server. However, because your bundle redefines the virtual path in which the stylsheets are located the relative paths to images no longer work.
If you want to use a bundle you must define it with a path that will not break relative image paths in the stylesheets. In your case, since the KendoUI stylesheets are located at ~/Kendo/Content/kendo/2013.2.918, you should define the bundle with that same path:
bundles.Add(new StyleBundle("~/Kendo/Content/kendo/2013.2.918/bundle").Include(
"~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css",
"~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css",
"~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css",
"~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css"
));
I hope that helps.
Hi I hat the same problem. but I saw that the page was able to get the sprite file, but does not show some symbols. The temporally solution was set the bundle EnableOptimizations property to false.
BundleTable.EnableOptimizations = False
I'm having trouble getting multiple pages working with the HTML Ant Build Script. This was working at one time where I would get multiple contatenated js files based on the different pages, but that has since stopped working. No errors. No warnings. Just stopped outputting properly.
I am using the HTML5 boilerplate for the HTML.
I'm using the latest version of the build script from: https://github.com/h5bp/ant-build-script
-index.html
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/script1.js"></script>
<script src="js/script2.js"></script>
<script src="js/script3.js"></script>
<script src="js/script4.js"></script>
<!-- end scripts -->
-index2.html has this:
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/main2.js"></script>
<script src="js/script1.js"></script>
<!-- end scripts -->
I have this set in the config file:
file.pages = index.html, index2.html
However, only index.html gets the single concatenated js file, while the index2.html gets the comments stripped and everything, it does not produce a separate concatenated js file. It just throws errors of missing js files because script1.js was used in the first and not copied over to the publish folder.
Make sense? Not sure what is wrong. It is probably something dumb I am doing, but I can't seem to find any answers by searching Stack Overflow for the last hour.
I'm using the RC and I've checked everything is up to date via NuGet.
In my global.asax.cs ive got:
BundleTable.Bundles.AddDefaultFileExtensionReplacements();
BundleTable.Bundles.AddDefaultIgnorePatterns();
BundleTable.Bundles.AddDefaultFileOrderings();
Bundle scripts = new Bundle("~/Scripts");
scripts.IncludeDirectory("~/Scripts", "*.js");
BundleTable.Bundles.Add(scripts);
Bundle css = new Bundle("~/Content/css");
css.IncludeDirectory("~/Content/css", "*.css", false);
BundleTable.Bundles.Add(css);
I've tried a few different configurations of this with no improvement.
Then in my layout ive got:
<link href="#BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<script src="#BundleTable.Bundles.ResolveBundleUrl("~/Scripts")"> </script>
When the page loads its got decent looking urls:
<link href="/Content/css?v=QAsFYXHCbnaU70oGVxpgi9py9iKQrT9C4BVNdHa7xoI1" rel="stylesheet" type="text/css" />
But that url redirects to:
/Content/css/
Which returns a 404 not found error...
Anybody got any ideas?
The ~/Scripts and ~/Content/css virtual-path already exists on disk, so you need to make them some virtual-url, lets say ~/Scripts/js, and ~/Content/styles that's it, it's fine now.
Bundle scripts = new Bundle("~/Scripts/js");
scripts.IncludeDirectory("~/Scripts", "*.js");
BundleTable.Bundles.Add(scripts);
Bundle css = new Bundle("~/Content/styles");
css.IncludeDirectory("~/Content/css", "*.css", false);
BundleTable.Bundles.Add(css);
Also in MVC4 the Routing, Bundles, and Filters configuration has been moved to the
~/App_Start/(RouteConfig, BundleConfig, FilterConfig).cs
so check that you have those, if so then write your configurations there.
The bundle module logic that decides whether or not to handle a request, will not takeover requests to existing files or directories. So that's why your bundle requests don't work when they live at the same virtual path as an existing directory (or file).
I implemented jQuery DatePicker in my VS2010 project and it works fine with one small issue. When I implemented a custom theme, I lost my prev and next icons (for moving through the months).
Here's the image:
Here are the jquery library references:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="~/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="~/lightbox/js/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="~/lightbox/css/lightbox.css" media="screen" />
<link type="text/css" rel="Stylesheet" href="~/Scripts/jquery-ui-1.8.9.custom.css" />
Here are my image references in jquery-ui-1.8.9-custom.css
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(~/images/jquery/ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(~/images/jquery/ui-icons_6da8d5_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(~/images/jquery/ui-icons_217bc0_256x240.png); }
.ui-state-active .ui-icon {background-image: url(~/images/jquery/ui-icons_f9bd01_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(~/images/jquery/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(~/images/jquery/ui-icons_cd0a0a_256x240.png); }
I modified the path to be sure it pointed to the files. Not sure what I'm missing.
Any help would be greatly appreciated.
Thanks.
Are you sure your paths are pointing correctly (AKA, are you seeing the jQuery UI icons elsewhere in your site)? That is the first thing I would check...particularly because you modified the path. You may have inadvertently screwed something up.
Update
I think you need to fix your paths - I don't think they are pointing correctly. From what I see, they have to be relative to your .custom.css file. So, for example, my jquery-ui-1.8.9.custom.css file exists in my Content folder. My states and images are referenced like this:
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }
Therefore, I have to place an images folder at the same level as the jquery-ui-1.8.9.custom.css and place all the images inside that folder. Try that and see if it fixes the problem for you.
For me, the issue was that the Themeroller was adding double quotes around the image paths. I just removed those from my custom CSS file, and everything worked.
i.e. I changed:
url("images/ui-bg_highlight-hard_100_fafaf4_1x100.png")
to:
url(images/ui-bg_highlight-hard_100_fafaf4_1x100.png)
throughout the whole CSS file.
I also was having this problem. I was pulling my hair out. But yes, JasCav is correct, you must put an "images" folder at the same level as your query-ui-1.8.9.custom.css (or in my case jquery-ui-1.8.16.custom.css) file. And inside this folder copy your *.png files from your jquery ui download.
I had the exact same problem and finally solved it.
The problem was coming from the rights on the 'images' directory. I had to make the directory browsable for 'others' by using chmod:
chmod o+rx images
I hope this helps
I had the same problem. Created an images directory under my theme name, and dragged all the gif files and png files from the theme into the new images directory. worked like a charm, no messing with the paths.
I think the themeroller app at JQuery_ui doesn't package the images into an image directory, and it should.
Anyway, revert your pathing back to the way it was, and give it a try. Good luck.
By the way, it appears you put your custom.css into your scripts folder, that gets messy, I just pointed mine to the themes folder copy. i.e.
link href="../../Content/themes/humanity/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css"
I also fell foul of this. I have read the answers given above and they do not tally 100% with my experience as of July 2012. I do not know if the UI custom ThemeRoller has been changed at all since this question was first raised which may explain the previous comments/answers. However for me these answers over complicate what needs to be done and were therefore a confusion to me.
What worked for me :-
Use ThemeRoller to create you customised theme.
Download the theme - for example to directory my_Work_Area outside of your project.
Unzip the download to my_Work_Area
Review the index.html after unzipping - check that the datepicker style reflects the style tested in the ThemeRoller. If not go back to the ThemeRoller and repeat 1-3.
copy my_Work_Area/js/jquery-ui-1.8.21.custom.min.js to your jquery folder within your project for example _public/_jquery/jquery-ui-1.8.21.custom.min.js
if required similarly copy jquery-1.7.2.min.js
copy my_Work_Area/css/custom-theme/jquery-ui-1.8.21.custom.css to your css folder within your project for example _public/_css/jquery-ui-1.8.21.custom.css
copy the folder my_Work_Area/css/custom-theme/images to your css folder within your project for example _public/_css/images
as per the documentation ensure that the following is included in your html
<link rel="stylesheet" type="text/css" href="../_public/_css/jquery-ui-1.8.21.custom.css" />
<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../_public/_jquery/jquery-ui-1.8.21.custom.min.js"></script>
That is all you need to do.
Whether it is appropriate to have a folder called images inside your css folder might need to be considered. Changing the location of this folder would involve considering of the paths employed.
But if you just want the ui to work 'out of the box' the above works with no need to make anything complicated.
I hope that this helps.
Place image folder with icons files, in that location, where the .css file exists.
who reading this question,
If you use this dateime picker
http://www.malot.fr/bootstrap-datetimepicker/
You add this option: bootcssVer : 3
$( ".date" ).datepicker( "option", "changeMonth", true, **"bootcssVer" : 3** );
The icon will show!!!
Let me share the solution for my case. My ASP.NET MVC project has the following directory structure:
Content
themes
base
images
icon1.png
icon2.png
jquery-ui.css
Other directories
When I run application locally via Visual Studio, in the jquery-ui.css I can refer to the icons using the following url: url("images/icon1.png"). But when I run application on the Azure server, I must refer to this icon with: url("themes/base/images/icon1.png"). It turned out, that the real "working"/"current" directory for jquery-ui.css is Content directory. That is because in cshtml I load jquery-ui.css using the bundle, which I create in the following way:
bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css"));
It seems like VS is "super intelligent" and looks for referred images also inside subdirectories.
The solution can be to use inside jquery-ui.css file the absolute url to the images: url("/Content/themes/base/images/icon1.png") (or proper path relative to the Content directory in my case, i.e. url("themes/base/images/icon1.png"), as I mentioned above) or to create bundle with more nested path:
bundles.Add(new StyleBundle("~/Content/themes/base/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css"));
Another (worse in my opinoin) solution is to load css file into cshtml using <link> element:
<link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />